受控组件和不受控组件
受控组件是指:数据来源比较单一,非受控组件来源比较复杂。我们
应该尽量的避免使用非受控组件,比如input标签的value属性这个来源可能是用户的输入,也可能作为默认值进行输入。比如我们封装了一个Search组件
//search.jsx
const Search = (props) => {
return <input value={props.defaultValue} onChange={props.onChange} />
}
// app.jsx
import Search from './search.jsx';
class App extends React.Component {
constructor(props) {
super(props);
this.state = {
value: ''
};
this.handleOnChange = this.handleOnChange.bind(this);
}
render() {
return(<Search value={this.state.value} onChange={this.handleOnChange}/>);
}
handleOnChange(e) {
this.setState({
value: e.target.value;
});
}
}
个人思考: 我们应该避免将状态引入到相关的组件中去,尽量创造受控组将。
网友评论