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>
    );
  }
}

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

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

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>
    );
 }
}

和孩子

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。

在输入更改时更改子状态

1 个答案: