javascript - 通过 props 将状态值传递给子组件

Question

我正在尝试将用户输入的值从应用程序组件传递到 passTicket 组件。我尝试调用 props 来传递此状态数据，但在尝试访问它时不断收到未定义的错误。我是个新手，如果有人能帮助我理解我犯的错误，那就太好了。这是我想要实现的目标的一个示例。这是我的主要组成部分:

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

Answer 1

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

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

}

在您给出的示例中，您似乎并未将状态传递给您尝试访问它的组件。此外，您似乎正在尝试访问 updatedTicket作为 state 对象的属性，因此请注意如何访问 props。

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

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

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