目前,为了使受控输入在无状态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类属性使其更简单:
InputComponent
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,则已经开箱即用。
create-react-app
此外,您可以将控制输入的道具重命名为value,onChange因为它们通常会更常用。
value
onChange