目前,为了使受控输入在无状态React组件内工作,我将无状态组件包装在Sate完整组件内。
例如,
const InputComponent = (props) => {
return (
<input value={props.name} onChange={props.handleChange} />
);
}
class App extends React.Component {
constructor(props) {
super(props);
this.state = {
name: 'Tekeste'
};
this.handleChange = this.handleChange.bind(this);
}
handleChange(event) {
this.setState({
name: event.target.value
});
}
render() {
return (
<InputComponent name={this.state.name} handleChange={this.handleChange} />
);
}
}
我想知道的是几件事。
由于InputComponent
接收到它的值和从其父项修改它的回调,因此它是一个无状态的受控输入。这是一个非常好的模式,您还可以使用如下ES7类属性使其更简单:
class App extends React.Component {
state = {
name: 'Tekeste'
};
handleChange = (event) => {
this.setState({
name: event.target.value
});
}
render() {
return (
<InputComponent name={this.state.name} handleChange={this.handleChange} />
);
}
}
如果您正在使用create-react-app
,则已经开箱即用。
此外,您可以将控制输入的道具重命名为value
,onChange
因为它们通常会更常用。