Reactjs 从输入组件获取值，并在React中的另一个组件中使用它

我是一个新的反应者，我有这个简单的代码示例，我只需要从输入中获取值并显示返回的值

类应用程序扩展了React.Component{
建造师（道具）{
超级（道具）；
this.state={word:：}；
this.onClick=this.onClick.bind（this）；
}
onClick（e）{
this.setState（{word:/*如何获取输入值？？*/}）；
}
render（）{
返回(
说吧！
{this.state.word}
);
}
}

我知道，我希望使用组件状态作为将信息从父组件传播到其子组件的一种方式。我不知道的是我应该如何获得一个孩子的状态，以便在另一个孩子身上使用

---

我相信这应该可以以简单的方式进行，因为使用纯DOM或JQuery的等效方法也非常简单（一行或两行代码）。

您可以使用

createRef

import React, { createRef } from "react";
import "./styles.css";

class App extends React.Component {
  constructor(props) {
    super(props);
    this.state = { word: "" };
    this.onClick = this.onClick.bind(this);
  }
  textInput = createRef();
  onClick(e) {
    this.setState({ word: this.textInput.current.value });
  }

  render() {
    return (
      <div className="App">
        <form>
          <input ref={this.textInput} type="text" />
          <button onClick={this.onClick} type="button">
            Say it!
          </button>
        </form>
        <div>{this.state.word}</div>
      </div>
    );
  }
}
export default App;

import React，{createRef}来自“React”；
导入“/styles.css”；
类应用程序扩展了React.Component{
建造师（道具）{
超级（道具）；
this.state={word:：}；
this.onClick=this.onClick.bind（this）；
}
textInput=createRef（）；
onClick（e）{
this.setState（{word:this.textInput.current.value}）；
}
render（）{
返回(
说吧！
{this.state.word}
);
}
}
导出默认应用程序；

---

在这里检查一些东西。首先，我没有看到你提到的孩子。此外，您可以说

获取要在另一个子项中使用的子项的状态

。这里只有一个父组件。然后，您使用的是

，这意味着内部的一个按钮将

提交

值，因此您需要

e.preventDefault（）

的转义图案填充。最后，如果必须使用基于类的组件而不是函数组件，则不需要更多的

构造函数

，并且可以使用箭头函数绑定函数。这里有一个我认为你在问的问题的工作示例：

@jornsharpe你能把这个作为答案并显示代码示例吗？我想在我的代码示例中，已经在父级上使用状态了。请阅读，谢谢。这是可行的，至少现在我知道谷歌应该做什么了。问题：如果我有多个裁判，这是否意味着我必须为每个裁判分配一个裁判？这是…正确的方法还是仅仅是一种解决方法？我真的对react一无所知。所以您可以在父组件中设置状态，并为您的两个子组件共享它，您可以在这里看到