在 React 的 parent 组件中使用给予 child 的道具

Question

在我的 parent 组件中，我正在渲染一个看起来像这样的输入组件

<InputField
  name='source'
  type='text'
  input={(e) => this.inputValue(e)}
  inputValue={value} />

在我的 parent 中，我需要使用这个 child 组件的名称作为状态。它应该是这样的

this.state = {
  inputValue: {
    source: "Whatever is written in the input",
    text: "The value of the second input"
  }
}

所以在我的 parent 中，我想访问我为 child 组件提供的道具名称。这样 parent 的状态应该动态更新到它正在呈现的不同 InputFields。我的函数看起来像这样

inputValue(e) {
    this.setState({
      inputValue: {
        thisShouldBeTheChildsName: e.target.value
      }
    })    
  }

那么如何在 parent 中的这个函数中访问给定名称？

Answer 1

您可以将道具 name 作为参数传递给 inputValue 父函数，然后更新状态

  this.setState({
        inputValue: {
          ...this.state.inputValue,
          [key]: e.target.value
        }
      })

请注意，此处 [key] 用于使用动态键更新状态对象，而 ...this.state.inputValue, 是一种扩展运算符语法，用于将所有其他值保持在 inputValue 状态。

请参阅此答案以了解 ... 的作用：

What is the meaning of this syntax "{...x}" in Reactjs

演示版

class App extends React.Component {
    state = {
        inputValue: {}
    }
    
    inputValue(e, key) {
     console.log(key, e.target.value);
     
      this.setState({
        inputValue: {
          ...this.state.inputValue,
          [key]: e.target.value
        }
      })    
    }
    render() {
       return (
           <div>
               <InputField
                  name='source'
                  type='text'
                  input={(e, key) => this.inputValue(e, key)}
                  inputValue={this.state.inputValue['source'] || ''} />
               <InputField
                  name='text'
                  type='text'
                  input={(e, key) => this.inputValue(e, key)}
                  inputValue={this.state.inputValue['text'] || ''} />
           </div>
       )
    }
}

class InputField extends React.Component {
    render() {
        return (
            <div>
                <input type={this.props.type} value={this.props.inputValue} onChange ={(e) => this.props.input(e, this.props.name)}/>
            </div>
        )
    }
}

ReactDOM.render(<App/>, document.getElementById('app'));

<script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.1.0/react.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.1.0/react-dom.min.js"></script>
<div id="app"><div>

在 React 的 parent 组件中使用给予 child 的道具

Using props given to a child within the parent component in react

state

parent

parent-child

reactjs