Question

我想访问父组件SubmitForm的状态，并通过返回带有查询结果的span元素来返回结果。

伪造的DB或JSON文件为：

const citi = [
  {
    pc: '13000',
    city: 'berlin',
    population: '10million'
  }, {
    pc: '81000',
    city: 'munich'
  }
];

这些是更改和提交事件处理程序：

handleChange(event) {

  this.setState({ value: event.target.value });
}

handleSubmit(event) {
  alert('We will find the city for postal code: ' + this.state.value);
  event.preventDefault();
  var result = citi.filter(obj => obj.pc === this.state.value)[0].city;
  console.log(result);
  this.setState({ value: result });
}

渲染方法

render() {
  return (

    <form onSubmit={this.handleSubmit}>
      <label>
        Search by postcode:
     <input type="text" value={this.state.value} onChange={this.handleChange}
        />
      </label>
      <button type="submit" className="btn btn-default">Search</button>
      <ComponentB />
    </form>
  );
}

这是子组件

class ComponentB extends React.Component {
  constructor(props) {
    super(props);
    // this.state = {val: 'hdgfh'};

  }


  render() {
    return <span>The postcode is in : {this.props.value}</span>;
  }
}

当我在父级组件中全部渲染时，一切正常，但是如何在父级中渲染并显示结果？控制台会记录正确的结果，但是有关访问父/子状态的所有问题对我来说都没有帮助。

Codepen链接：

https://codepen.io/damPop/pen/ReXwoo?editors=0010

Answer 1

您需要通过道具传递value（它们不是继承的）

如此

<ComponentB value={this.state.value} />

更新笔：https://codepen.io/anon/pen/jQNvOe?editors=0010

Answer 2

您应该像这样传递父母的身份作为道具：

<ComponentB value={this.state.value}/>

如何在React中访问父组件状态

2 个答案: