javascript - 在输入更改时更改子级内部的父级状态

Question

我有以下父组件:

   class NewPetForm extends React.Component {
     state = {
       name: '',
       age: '',
       animal: '',
       breed: ''
       };

    render() {

    return (
      <StyledNewPetForm >
        <Input label="name" />
        <Input label="age" />
        <Input label="animal"/>
        <Input label="breed"/>
        <Button type="submit" />
      </StyledNewPetForm>
    );
  }
}

以及以下子组件:

  class Input extends React.Component {
  render() {
    return (
      <StyledWrapper>
        <StyledInput
          value={this.props.test}
          type="text"
        />
      </StyledWrapper>
    );
  }
}

是否可以监听子组件中所有输入的变化并相应地更新状态？

我想要实现的基本上是将处理程序传递给不同的输入并动态更新状态，因此有可能重用输入组件。

changeHandler = (event,stateName) =>{
  this.setState({[stateName]:event.target.value]})
}
<Input changed={changeHandler(event,'name')}></Input>
<Input changed={changeHandler(event,'age')}></Input>
<Input changed={changeHandler(event,'breed')}></Input>
// Inside Input
<input onChange={this.props.changed}/>

感谢您的帮助!

Answer 1

是的，您可以这样做，您可以将函数作为属性传递给子元素，并在子元素发生更改时调用它。

这是一个例子:

class NewPetForm extends React.Component {
 state = {
   name: ''
 };

 onValueChange(key, event) {
    this.setState({[key]: event.target.value})
 }

 render() {
    return (
      <StyledNewPetForm >
        <Input value={this.state.name} onValueChange={this.onValueChange.bind(this, 'name')} />
      </StyledNewPetForm>
    );
 }
}

和 child

class Input extends React.Component {
 render() {
     return (
      <StyledWrapper>
        <StyledInput
          onChange={this.props.onValueChange}
          value={this.props.value}
          type="text"
        />
      </StyledWrapper>
    );
  }
}

{[key]: event.target.value} 可能看起来很困惑，这只是新语法，允许您在对象文字中使用字符串作为属性名称。

重要的部分是onChange={this.props.onValueChange}，在这里，当输入的值发生变化时，我将调用父函数NewPetForm.onValueChange。