第一次尝试

Question

我有输入，用户将在InputField组件中输入文本（因此状态会发生变化）。

[...]
    constructor(props)
    this.state = {text: ''}
    this.onChange = (event) => {
        this.setState({text: event.target.value})
    }
[...]
render() {
  return (<input type='text' onChange={this.onChange} textValue={this.state.text}/>)
}

我将传递此text作为主要组件表单的道具。但它不起作用：

第一次尝试

[...]
  constructor(props)
  this.state = {text: ''}
  this.onChange = (event) => {
    this.setState({text: event.target.value})
  }
[...]

render() {
  return(<input type='text' onChange={this.onChange} textValue={text.state.text}/>)
}

第二次尝试

我也尝试过这种方式： [...] 构造（道具）

    this.state = {text: ''}
    this.onChange = (event) => {
        this.setState({text: event.target.value})
        this.props.textValue ({text: text})
    }
[...]

render() {
  return(<input type='text' onChange={this.onChange}/>)
}

然后我得到textValue属性，所以我可以在提交中发送输入值。

[...]
  this.handleSubmit = () => {
    let data = {text: this.props.data}
  }
[...]
render() {
  return(
    <form onSubmit={this.handleSubmit} data={this.props.textValue}>
      <InputField/>
      <button type='submit'>Send</button>
    </form>
  )
}

为什么我没有实现我想要的目标？

在研究了道具和国家背后的概念之后，我想我应该做相反的事情，这就是为什么它变得如此艰难（也许）。就像在Form我应该使用状态而不是道具（以及InputField道具而不是状态一样，所以处理不在InputField但在Form中的更改，如下所示： https://stackoverflow.com/a/31756470 - 我正在做'父母和单身孩子'的例子。我混淆了一切，现在我很困惑，这一切都出错了。

**概念性例子比实际例子更受欢迎。我的问题是这个流程背后的理论。 **

Answer 1

这绝对是相反的。我认为不是解释你的例子中的错误，我认为理解你可以将状态保存在子组件中是很重要的，但是一旦父母需要访问状态更改，然后你应该将它抽象给父母，然后将数据作为prop传递给孩子，并传递一个函数来更新父母的状态。这是反应的黄金法则之一，它永远不会反过来。

反应：将孩子的状态传递给其父母或相反？

第一次尝试

第二次尝试

1 个答案: