通过 props 将状态值传递给子组件答案

【问题标题】：passing state value to a child component via props通过 props 将状态值传递给子组件
【发布时间】：2019-07-14 16:36:07
【问题描述】：

我正在尝试将用户输入的值从应用组件传递到 passTicket 组件。我尝试调用道具来传递此状态数据，但在尝试访问它时不断收到未定义的错误。我是新来的反应，如果有人可以帮助我理解我做错了什么，那就太好了。这是我想要实现的一个示例。这是我的主要组件：

class App extends Component {

  constructor(props){
    super(props);
    this.state = {
      ticket:"",
    };
    this.changeTicket = this.changeTicket.bind(this);
    this.handleSubmit = this.handleSubmit.bind(this);
    this.keyPress = this.keyPress.bind(this);
  }

  changeTicket(e){
    this.setState({
      ticket : e.target.value,
    })
  }

  handleSubmit(){
    this.setState({
      updatedTicket: this.state.ticket
    });
  }

  keyPress(e){
    if (e.keyCode ===13){
      this.handleSubmit();
    }
  }

  render() {
    return (
      <div className="App">
        <header className="App-header">
          <input type="text" placeholder="ENTER TICKET NUMBER" value={this.state.ticket} onKeyDown={this.keyPress} onChange={this.changeTicket}/>
        </header>
      </div>
    );
  }
}

并且我希望能够将 updatedTicket 值存储在我可以在我的 PassTicket 组件中使用的变量中。这是我迄今为止尝试过的，但它发生的错误如下Uncaught TypeError: Cannot read property 'updatedTicket' of undefined

这是我的第二个组件的样子：

class PassTicket extends Component {

  transferredTicket(){
    const myTicket = this.props.state.updatedTicket;
    return myTicket
  }

  render() {
    return (
        <p>{this.transferredTicket()}</p>
    );
  }
}

【问题讨论】：

你在哪里实际实例化PassTicket？为什么不将updatedTicket 作为道具传递下去？
这就是我认为我对 this.prop.state.updatedTicket 所做的。我现在有一些严重的隧道视野。我确定我在做一些傻事。

标签： javascript reactjs react-redux

【解决方案1】：

当将属性从父组件传递到子组件时，该属性将按其传递的名称存储到道具中。例如：

class Parent extends Component {
  state = {
     ticket: '',
  }

  render() {
    return <ChildComponent updatedTicket={this.state.ticket} />
  }
}


class ChildComponent extends Component {
  static propTypes = {
     updatedTicket: PropTypes.string,
  }

  static defaultProps = {
     updatedTicket: '',
  }

  render() {
    return (
      <div>{this.props.updatedTicket}</div>
    );
  }

}

在您给出的示例中，您似乎没有将状态传递给您尝试访问它的组件。此外，您似乎正在尝试访问 @ 987654322@ 是 state 对象的属性，因此请注意您访问道具的方式。

因此，为了访问子组件上的 updatedTicket 属性，您首先需要导入 PassTicket 组件，在父 (App) 组件中实例化它，然后将属性向下传递：

<PassTicket updateTicket={this.state.ticket} />

然后您就可以像这样访问PassTicket 组件中的字符串 - this.props.updateTicket

【讨论】：

非常感谢，正是我正在寻找的答案。

【解决方案2】：

所以 .state 在 react 中是一个局部状态，只对单个组件可见。你可以在这里阅读更多信息：https://reactjs.org/docs/state-and-lifecycle.html

为了传递你的状态，你需要使用道具系统。所以在你实例化你的组件的地方，你可以传入父级的状态。例如：

<PassTicket ticket={this.state.updatedTicket}/>

然后在您的PassTicket 渲染函数中，您可以访问票证道具：

render() {
  const { ticket } = this.props
  return (
    <div>{ticket}</div>
  )
}

【讨论】：

谢谢马特，你把它带回家了。