作者:hi347 | 来源:互联网 | 2023-02-01 16:13
目前,为了使受控输入在Stateless React组件中工作,我将无状态组件包装在Sate完整组件中.
例如,
const InputCompOnent= (props) => {
return (
);
}
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 (
);
}
}
我想知道的是一些事情.
这是一个好模式吗?
如果不是,我怎样才能实现我的目标,即在无状态组件内部控制输入.
小智..
8
由于InputComponent
接收到它的值以及从其父级修改它的回调,因此它是一个没有状态的受控输入.这是一个非常好的模式,你也可以使用这样的ES7类属性使它更简单:
class App extends React.Component {
state = {
name: 'Tekeste'
};
handleChange = (event) => {
this.setState({
name: event.target.value
});
}
render() {
return (
);
}
}
如果您正在使用create-react-app
它,它已经开箱即用.
此外,您可以将受控输入的道具重命名为value
和onChange
更常用的.
1> 小智..:
由于InputComponent
接收到它的值以及从其父级修改它的回调,因此它是一个没有状态的受控输入.这是一个非常好的模式,你也可以使用这样的ES7类属性使它更简单:
class App extends React.Component {
state = {
name: 'Tekeste'
};
handleChange = (event) => {
this.setState({
name: event.target.value
});
}
render() {
return (
);
}
}
如果您正在使用create-react-app
它,它已经开箱即用.
此外,您可以将受控输入的道具重命名为value
和onChange
更常用的.