Javascript 通过ReactJS上的3级组件进行通信

我是React的新开发人员，显然，我正在努力通过组件传递数据。我在CodePen上创建了一个示例，试图理解流程。该示例只是将值从模式返回到主级别的示例

我有以下层次结构：

• 主要
  • 内部组件
    • 形式
      • 输入字段

在我的主组件中，我有一个span，当输入字段中的文本被键入时，我想更新它

我使用道具传递回调并返回所需的值。 那么，有没有更好的方法将这些更改传递到我的主要级别

PS：我在StackOverflow上看到了很多例子，但是如果没有Redux或Flux，我就看不到这个例子

我的代码：

类主扩展React.Component{
建造师（道具）{
超级（道具）；
此.state={
文本：“”
}
this.onUpdateLabel=this.onUpdateLabel.bind（this）；
}
onUpdateLabel（值）{
this.setState（{text:value}）；
}
render（）{
让value=this.state.text！=''？this.state.text:'等待…'；
返回(
主要
{value}

);
}
}
类Modal扩展了React.Component{
建造师（道具）{
超级（道具）；
}
render（）{
this.props.text='内部组件'；
返回(
情态动词
)
}
}
类形式扩展了React.Component{
建造师（道具）{
超级（道具）；
此.state={
文本：“”
}
this.onClickButton=this.onClickButton.bind（this）；
this.onUpdateText=this.onUpdateText.bind（this）；
}
onUpdateText（e）{
this.setState（{text:e.target.value}）；
}
onClickButton（）{
this.props.onUpdateLabel（this.state.text）；
}
render（）{
返回(
形式
点击
);
}
}
ReactDOM.render(
, 
document.getElementById（'app'）
);

您可以使用，但正如文档中所述：

这是一个实验性的API，很可能在React的未来版本中被打破

如果您决定继续使用它，您可以这样写：

class Main extends React.Component {
  static childContextTypes = { // Define the child context
      onUpdateLabel: PropTypes.func,
  }

  constructor(props) {
    super(props);
    this.state = {
      text: ''
    }
    this.onUpdateLabel = this.onUpdateLabel.bind(this);
  }

  onUpdateLabel(e) {
    this.setState({ text: e.target.value });
  }

  getChildContext(){ // Return the wanted context
      return {
          onUpdateLabel: this.onUpdateLabel,
      }
  }

  render() {...}
}

在您的
表格中

class Form extends React.Component {

  static contextTypes = { // Define the available context
      onUpdateLabel: PropTypes.func,
  }

  constructor(props) {
    super(props);
    this.state = {
      text: ''
    }
    this.onClickButton = this.onClickButton.bind(this);
    this.onUpdateText = this.onUpdateText.bind(this);
  }

  onUpdateText(e) {
    this.setState({ text: e.target.value });
  }

  onClickButton() { // Retrieve it from context instead of props
    this.context.onUpdateLabel(this.state.text);
  }

  render(){...}
}

您可以在主元素中定义上下文，并在其中一个子元素中使用它。
您可以使用，但正如文档中所述：

这是一个实验性的API，很可能在React的未来版本中被打破

如果您决定继续使用它，您可以这样写：

class Main extends React.Component {
  static childContextTypes = { // Define the child context
      onUpdateLabel: PropTypes.func,
  }

  constructor(props) {
    super(props);
    this.state = {
      text: ''
    }
    this.onUpdateLabel = this.onUpdateLabel.bind(this);
  }

  onUpdateLabel(e) {
    this.setState({ text: e.target.value });
  }

  getChildContext(){ // Return the wanted context
      return {
          onUpdateLabel: this.onUpdateLabel,
      }
  }

  render() {...}
}

在您的
表格中

class Form extends React.Component {

  static contextTypes = { // Define the available context
      onUpdateLabel: PropTypes.func,
  }

  constructor(props) {
    super(props);
    this.state = {
      text: ''
    }
    this.onClickButton = this.onClickButton.bind(this);
    this.onUpdateText = this.onUpdateText.bind(this);
  }

  onUpdateText(e) {
    this.setState({ text: e.target.value });
  }

  onClickButton() { // Retrieve it from context instead of props
    this.context.onUpdateLabel(this.state.text);
  }

  render(){...}
}

您可以在主元素中定义上下文，并在其中一个子元素中使用它。
您调用的方法没有问题

e、 目标价值

它不存在的地方

onUpdateLabel(text) {
   this.setState({ text: text });
}


类主扩展React.Component{
建造师（道具）{
超级（道具）；
此.state={
文本：“”
}
this.onUpdateLabel=this.onUpdateLabel.bind（this）；
}
onUpdateLabel（文本）{
this.setState（{text:text}）；
}
render（）{
让value=this.state.text！=''？this.state.text:'等待…'；
返回(
主要
{value}

);
}
}
类Modal扩展了React.Component{
建造师（道具）{
超级（道具）；
}
render（）{
this.props.text='内部组件'；
返回(
情态动词
)
}
}
类形式扩展了React.Component{
建造师（道具）{
超级（道具）；
此.state={
文本：“”
}
this.onClickButton=this.onClickButton.bind（this）；
this.onUpdateText=this.onUpdateText.bind（this）；
}
onUpdateText（e）{
this.setState（{text:e.target.value}）；
}
onClickButton（）{
this.props.onUpdateLabel（this.state.text）；
}
render（）{
返回(
形式
点击
);
}
}
ReactDOM.render（，document.getElementById（'app'））
您调用的方法没有问题

e、 目标价值

它不存在的地方

onUpdateLabel(text) {
   this.setState({ text: text });
}


类主扩展React.Component{
建造师（道具）{
超级（道具）；
此.state={
文本：“”
}
this.onUpdateLabel=this.onUpdateLabel.bind（this）；
}
onUpdateLabel（文本）{
this.setState（{text:text}）；
}
render（）{
让value=this.state.text！=''？this.state.text:'等待…'；
返回(
主要
{value}

);
}
}
类Modal扩展了React.Component{
建造师（道具）{
超级（道具）；
}
render（）{
this.props.text='内部组件'；
返回(
情态动词
)
}
}
类形式扩展了React.Component{
建造师（道具）{
超级（道具）；
此.state={
文本：“”
}
this.onClickButton=this.onClickButton.bind（this）；
this.onUpdateText=this.onUpdateText.bind（this）；
}
onUpdateText（e）{
this.setState（{text:e.target.value}）；
}
onClickButton（）{
this.props.onUpdateLabel（this.state.text）；
}
render（）{
返回(
形式
点击
);
}
}
ReactDOM.render（，document.getElementById（'app'））

实际上，我正在更新change事件中的文本值，并通过onClick调用回调
onUpdateText（e）{this.setState（{text:e.target.value}）；}onClickButton（）{this.props.onUpdateLabel（this.state.text）；}
我指的是在父组件中编写的方法实际上，我正在更新更改事件中的文本值，并通过onClick调用回调
onUpdateText（e）{this.setState（{text:e.target.value}）；}onClickButton（）{this.props.onUpdateLabel（this.state.text）；}
我指的是用父组件编写的方法谢谢！！我在看