Question

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

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

}

在您给出的示例中，似乎没有将状态传递给要访问其的组件。此外，似乎您正在尝试访问{ {1}}作为updatedTicket对象的属性，所以请当心您如何访问道具。

因此，为了访问子组件上的state属性，您首先需要导入updatedTicket组件，并在父（PassTicket）组件中实例化它，并将属性传递给下层

App

这样您就可以访问<PassTicket updateTicket={this.state.ticket} />组件中的字符串了-PassTicket

Answer 2

因此，反应中的.state是一个局部状态，仅对单个组件可见。您可以在这里了解更多信息：https://reactjs.org/docs/state-and-lifecycle.html

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

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

然后在PassTicket渲染功能中，您可以访问票证道具：

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

通过prop将状态值传递给子组件

2 个答案: