通过 props 将状态值传递给子组件 [英] passing state value to a child component via props

问题描述

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

class App 扩展组件 {构造函数(道具){超级(道具)；this.state = {票:""，};this.changeTicket = this.changeTicket.bind(this);this.handleSubmit = this.handleSubmit.bind(this);this.keyPress = this.keyPress.bind(this);}changeTicket(e){this.setState({票证:e.target.value，})}句柄提交(){this.setState({更新票:this.state.ticket});}按键(e){if (e.keyCode ===13){this.handleSubmit();}}使成为() {返回 (<div className="应用程序"><header className="App-header"><input type="text" placeholder="ENTER TICKET NUMBER" value={this.state.ticket} onKeyDown={this.keyPress} onChange={this.changeTicket}/></标题>

);}}

并且我希望能够将 updatedTicket 值存储在我可以在我的 PassTicket 组件中使用的变量中.这是我到目前为止所尝试的，但它发生的错误是以下 Uncaught TypeError: Cannot read property 'updatedTicket' of undefined

这是我的第二个组件的样子:

class PassTicket extends Component {转移票(){const myTicket = this.props.state.updatedTicket;返回我的机票}使成为() {返回 (<p>{this.transferredTicket()}</p>);}}

解决方案

当将一个属性从父组件传递给子组件时，该属性将按照传递的名称存储到 props 中.例如:

class Parent extends Component {状态 = {票:'',}使成为() {return }}类 ChildComponent 扩展组件 {静态 propTypes = {更新票:PropTypes.string，}静态默认道具 = {更新票:'',}使成为() {返回 (<div>{this.props.updatedTicket}</div>);}}

在您给出的示例中，您似乎没有将状态传递给您尝试访问它的组件.此外，您似乎正在尝试访问 updatedTicket 作为 state 对象的属性，所以请注意您访问 props 的方式.

因此，为了访问子组件上的 updatedTicket 属性，您首先需要导入 PassTicket 组件，并在父组件(App) 组件，并将属性向下传递:

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

i'm trying to pass the value entered by the user from the app component to the passTicket component. I tried invoking props to pass this state data but I keep getting an undefined error when attempting to access it. I'm new to react and it would be great if someone can help me make sense of what i'm getting wrong. This is a sample of what i'm trying to achieve. This is my main component:

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

and i'd like to be able to store the updatedTicket value in a variable which I can use in my PassTicket component. this is what i've attempted so far but the error it occurs is the following Uncaught TypeError: Cannot read property 'updatedTicket' of undefined

this is what my second component looks like:

class PassTicket extends Component {

  transferredTicket(){
    const myTicket = this.props.state.updatedTicket;
    return myTicket
  }

  render() {
    return (
        <p>{this.transferredTicket()}</p>
    );
  }
}

解决方案

When passing down a property from a parent to a child component, the property will be stored onto the props by the name it's passed through. For example:

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

}

In the example you've given, it doesn't seem like you're passing the state down to the component you're trying to access it in. In addition, it seems like you're trying to access the updatedTicket as a property of a state object, so just beware of how you're accessing your props.

Therefore, in order to access the updatedTicket property on the child component, you'll first need to import the PassTicket component, instantiate it in the parent (App) component, and pass the property down:

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

You would then be able to access the string in the PassTicket component like so - this.props.updateTicket

这篇关于通过 props 将状态值传递给子组件的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！