Question

在我的父组件中，我呈现的输入组件看起来像这样

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

在我的父母中，我需要使用这个子组件的名称作为状态。看起来应该是这样的

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

所以在我的父母内部，我想访问我给孩子组件的道具名称。这样，父级的状态应该动态地显示它正在呈现的不同InputField。我的功能看起来像这个

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

那么如何在父内部的这个函数中访问给定的名字？

Answer 1

您可以将props 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>

使用在父组件中给予孩子的道具做出反应

1 个答案: