初学react（五）：双向数据绑定

React双向数据绑定

input组件双向数据绑定，需要父组件暴露一个数据更新方法传递给子组件，input使用onChange触发，然后获取对应改变的值，重新setstate，用defaultValue 替换value作为默认值

//persion.js
import React from 'react';
const person = ( props ) => {
return (
<div>
<p onClick={props.myclick}>大家好，我系{props.name},我有{props.count}作品</p>
<p>{props.children}</p>
<input type="text" onChange={props.changed} defaultValue={props.name}></input>
</div>
)
}
export default person;
//app.js
import React from 'react';
import './App.css';
import Persion from './Persion/Persion';
class App extends React.Component {
/**
* state： 用于改变组件内状态的值（动态）
* props： 用于组件通信传值
*/
state = {
persions: [
{
name: '渣渣辉',
count: '30'
},
{
name: 'aaa',
count: '20'
},
{
name: 'bbb',
count: '10'
},
{
name: 'ccc',
count: '5'
}
],
otherState: 'anything'
}
// 函数直接定义在于render同级别，因为class类下,用this.函数名来访问
switchNameHandLer = ( newName ) => {
console.log("hello")
// es6中this执行为当前类
//this.state.persions[0].name = '渣渣渣渣辉' //不要直接去更改state Use setState()
this.setState({
persions: [
{
name: newName,
count: '3000'
},
{
name: 'aaa',
count: '20'
},
{
name: 'bbb',
count: '10'
},
{
name: 'ccc',
count: '5'
}
]
})
}
nameChangedHandLer = (event) => {
console.log(event.target)
this.setState({
persions: [
{
name: event.target.value,
count: '3000'
},
{
name: 'aaa',
count: '20'
},
{
name: 'bbb',
count: '10'
},
{
name: 'ccc',
count: '5'
}
]
})
}
render () {
return (
<div className="App">
hello world
{/* 函数不能加括号，加括号就直接执行了,使用箭头函数可以实现参数的传递 */}
{/* <button onClick={() => this.switchNameHandLer('古天乐')}>更改状态值</button> */}
{/* 第二种方式
bind 传递 （建议） */}
<button onClick={this.switchNameHandLer.bind(this, '古天乐')}>更改状态值</button>
<Persion
name={this.state.persions[0].name}
count={this.state.persions[0].count}
changed={this.nameChangedHandLer}
/>
<Persion
name={this.state.persions[1].name}
myclick={this.switchNameHandLer.bind(this, '渣渣辉2')}
count={this.state.persions[1].count}/>
<Persion name={this.state.persions[2].name}
count={this.state.persions[2].count}/>
<Persion name={this.state.persions[3].name}
count={this.state.persions[3].count}>
<a href='http://www.baidu.com'>非常感谢大家的支持</a>
</Persion>
</div>
);
}
}
export default
App;

触发，然后获取对应改变的值，重新setstate

最后

以上就是深情饼干为你收集整理的初学react（五）：双向数据绑定的全部内容，希望文章能够帮你解决初学react（五）：双向数据绑定所遇到的程序开发问题。

如果觉得靠谱客网站的内容还不错，欢迎将靠谱客网站推荐给程序员好友。