передача значения состояния дочернему компоненту через реквизит

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

То есть, .state в реакции - это локальное состояние, которое видно только для отдельного компонента.Вы можете прочитать больше об этом здесь: https://reactjs.org/docs/state-and-lifecycle.html

Для того, чтобы передать свое состояние, вам нужно использовать систему реквизита.Поэтому, когда вы создаете экземпляр своего компонента, вы можете перейти в состояние родителя.Например:

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

Затем внутри функции визуализации PassTicket вы можете получить доступ к реквизитам билета:

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

Answer 2

При передаче свойства от родительского к дочернему компоненту свойство будет сохранено в подпорках по имени, через которое оно прошло.Например:

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, так что просто остерегайтесь того, как вы обращаетесь к своим реквизитам.

Поэтому, чтобы получить доступ к свойству updatedTicketв дочернем компоненте сначала необходимо импортировать компонент PassTicket, создать его экземпляр в родительском (App) компоненте и передать свойство вниз:

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

После этого вы сможете получить доступ к строке в компоненте PassTicket следующим образом - this.props.updateTicket