通過prop將狀態值傳遞給子組件

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

}

在您給出的示例中，似乎沒有將狀態傳遞給要訪問其的組件。此外，似乎您正在嘗試以屬性訪問updatedTicket state對象，因此請當心您如何訪問道具。

因此，為了訪問子組件上的updatedTicket屬性，您首先需要導入PassTicket組件，在父組件（ App ）中實例化它，然后將該屬性向下傳遞：

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

然后，您將可以像這樣訪問PassTicket組件中的字符串this.props.updateTicket

Answer 2

因此，react中的.state是僅對單個組件可見的局部狀態。 您可以在此處了解更多信息： https : //reactjs.org/docs/state-and-lifecycle.html

為了傳遞您的狀態，您需要使用道具系統。 因此，在實例化組件的位置，您可以傳遞父級的狀態。 例如：

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

然后在您的PassTicket渲染函數中，您可以訪問票證道具：

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