Javascript 如何访问react中的父组件状态

我想访问父组件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>
  );
}

render（）{
返回(
按邮政编码搜索：
搜寻
);
}

这是子组件

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

  }


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

类组件B扩展了React.Component{
建造师（道具）{
超级（道具）；
//this.state={val:'hdgfh'}；
}
render（）{
返回的邮政编码为：{this.props.value}；
}
}

当我在父组件中渲染所有对象时，一切都正常，但如何在父组件中渲染并显示结果？ Console记录了正确的结果，但有关访问父/子状态的所有问题对我帮助都不够

代码笔链接：

---

您需要通过道具传递

值（它们不是继承的）

所以



更新笔：
您应该将父级状态作为道具传递，如下所示：

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


虽然我不能说我已经彻底阅读了您的所有代码，但在这种情况下，通常的想法是将数据作为prop传递到子组件中，因此我需要在父组件和他的子组件中返回邮编：{this.props.value}；，正确吗？您不必将其命名为
value
。它可能是任何东西。无论您添加到
的属性是什么，您都可以使用组件代码中的
this.props.attribute\u name
访问它们。我明白了：-）请投票并正确回答，以便很好地解释！因此，我需要在父项和子项comp中返回邮政编码：{this.props.value}；，对的
<ComponentB value={this.state.value}/>