Javascript 通过道具将状态值传递给子组件

我正在尝试将用户输入的值从应用程序组件传递到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>
    );
  }
}

---

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

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

}

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

类父级扩展组件{
状态={
票证：''，
}
render（）{
返回
}
}
类ChildComponent扩展组件{
静态类型={
UpdateDicket:PropTypes.string，
}
静态defaultProps={
更新的目录：“”，
}
render（）{
返回(
{this.props.updatedicket}
);
}
}

在您给出的示例中，您似乎没有将状态传递给您试图访问它的组件。此外，您似乎试图将

updatedicket

作为

state

对象的属性来访问，因此请注意访问道具的方式

因此，要访问子组件上的

updatedicket

属性，首先需要导入

PassTicket

组件，在父（

App

）组件中实例化它，然后向下传递属性：

---

然后，您将能够访问

PassTicket

组件中的字符串，如so-

this.props.updatecket
so
。react中的状态是仅对单个组件可见的本地状态。您可以在此处阅读更多信息：

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

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

}


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

您在哪里实际实例化了
通行证
？你为什么不把
updatedTicket
作为道具传下去呢？我想我就是这么用这个.prop.state.updatedTicket的。我现在有严重的隧道视力。我肯定我在做傻事。非常感谢你，这正是我想要的答案。谢谢马特，你的车开回家了。