Javascript React.js如何访问子组件中的输入值

我编写了简单的todo应用程序，但现在我在访问应用程序的子组件（InputForm）中的输入值时遇到了问题

也许我需要以某种方式重建结构或逻辑以使其工作

以下是我的应用程序组件：

class App extends React.Component {
  constructor (){
      super();
      this.state = {
          items : []
      }
  }

  addTodo ( e ){
    e.preventDefault();

    let itemHeading = this.refs.todoInput.value; // TODO Access to input value
    let itemKey = Date.now();

    const items = this.state.items.slice();

    items.push({
      heading: itemHeading,
      key: itemKey
    })

    this.setState({items: items});
  }
  render() {
    return (
      <div className="app-container">
        <InputForm onSubmit={this.addTodo.bind(this)}></InputForm>
        <TodoItems entries={this.state.items} />
      </div>
    );
  }
}

class InputForm extends React.Component {
  render (){
    return (
      <form onSubmit={this.props.onSubmit}>
        <input
          ref="todoInput"
          type="text"
          placeholder="Type your text here" />
        <button type="submit">Add to list</button>
      </form>
    )
  }
}

class App extends React.Component {
  constructor (){
      super();
      this.state = {
          items : []
      }
  }

  addTodo ( value ){

    let itemHeading = value; 
    let itemKey = Date.now();

    const items = this.state.items.slice();

    items.push({
      heading: itemHeading,
      key: itemKey
    })

    this.setState({items: items});
  }
  render() {
    return (
      <div className="app-container">
        <InputForm parentObject={this}></InputForm>
        <TodoItems entries={this.state.items} />
      </div>
    );
  }
}

class InputForm extends React.Component {

this.onSubmit = this.onSubmit.bind(this);
this.onInput = this.onInput.bind(this);


 onSubmit()
 {
  //invoking parent component function directly by passing parameter to it. 
  this.props.parentObject.addTodo(this.state.value);
 }

onInput(e) {
    this.setState({
      input: e.target.value
    });
  }

  render (){
    return (
      <form onSubmit={this.props.onSubmit}>
        <input
          value={ this.state.value }
          onChange={ this.onInput }
          ref="todoInput"
          type="text"
          placeholder="Type your text here" />
        <button type="submit">Add to list</button>
      </form>
    )
  }
}

类应用程序扩展了React.Component{
构造函数（）{
超级（）；
此.state={
项目：[]
}
}
addTodo（e）{
e、 预防默认值（）；
让itemHeading=this.refs.todoInput.value；//TODO访问输入值
让itemKey=Date.now（）；
const items=this.state.items.slice（）；
推({
标题：项目标题，
key:itemKey
})
this.setState（{items:items}）；
}
render（）{
返回(
);
}
}

这是我的InputForm组件：

class App extends React.Component {
  constructor (){
      super();
      this.state = {
          items : []
      }
  }

  addTodo ( e ){
    e.preventDefault();

    let itemHeading = this.refs.todoInput.value; // TODO Access to input value
    let itemKey = Date.now();

    const items = this.state.items.slice();

    items.push({
      heading: itemHeading,
      key: itemKey
    })

    this.setState({items: items});
  }
  render() {
    return (
      <div className="app-container">
        <InputForm onSubmit={this.addTodo.bind(this)}></InputForm>
        <TodoItems entries={this.state.items} />
      </div>
    );
  }
}

class InputForm extends React.Component {
  render (){
    return (
      <form onSubmit={this.props.onSubmit}>
        <input
          ref="todoInput"
          type="text"
          placeholder="Type your text here" />
        <button type="submit">Add to list</button>
      </form>
    )
  }
}

class App extends React.Component {
  constructor (){
      super();
      this.state = {
          items : []
      }
  }

  addTodo ( value ){

    let itemHeading = value; 
    let itemKey = Date.now();

    const items = this.state.items.slice();

    items.push({
      heading: itemHeading,
      key: itemKey
    })

    this.setState({items: items});
  }
  render() {
    return (
      <div className="app-container">
        <InputForm parentObject={this}></InputForm>
        <TodoItems entries={this.state.items} />
      </div>
    );
  }
}

class InputForm extends React.Component {

this.onSubmit = this.onSubmit.bind(this);
this.onInput = this.onInput.bind(this);


 onSubmit()
 {
  //invoking parent component function directly by passing parameter to it. 
  this.props.parentObject.addTodo(this.state.value);
 }

onInput(e) {
    this.setState({
      input: e.target.value
    });
  }

  render (){
    return (
      <form onSubmit={this.props.onSubmit}>
        <input
          value={ this.state.value }
          onChange={ this.onInput }
          ref="todoInput"
          type="text"
          placeholder="Type your text here" />
        <button type="submit">Add to list</button>
      </form>
    )
  }
}

类InputForm扩展了React.Component{
渲染（）{
返回(
添加到列表中
)
}
}

---

谢谢您的帮助。

您试图访问的refs对象位于

InputForm

实例上，因此如果您想从

App

访问该实例，您还必须在

InputForm

上添加ref。 然后可以使用

this.refs.InputForm.refs.todoInput访问它

话虽如此，最好执行ref回调而不是ref字符串，因为ref字符串计划从React中删除。
此外，最好不要过度使用参考文献。也许您可以通过
onChange
事件等将值保持在父级状态

将
输入
转换为a，并在输入中的文本发生更改时更新状态。单击submit时，将值发送给处理程序

删除
ref
，因为它们应该用于需要直接访问DOM的内容。这就是react docs要说的：

在典型的React数据流中，道具是父级的唯一方式
组件与其子组件交互。要修改子对象，请执行以下操作：
用新道具重新渲染。然而，在一些情况下，您可以
需要强制修改典型数据流之外的子级。
要修改的子级可以是React组件的实例，或者
它可以是一个DOM元素。对于这两种情况，React都提供了
逃生舱

这是一个不需要这个逃生舱的案例，你应该使用道具

带注释的工作演示：


const TodoItems=（{entries}）=>(

{entries.map（{heading，key}）=>(
{heading}
))}

);
类应用程序扩展了React.Component{
状态={
项目：[]
}
//addTodo将接收不带参考的所需值
addTodo=（heading）=>heading！=''&&this.setState（（{items}）=>({
items:items.concat（{//concat返回一个新数组
标题
关键字：Date.now（）
})
}));
render（）{
返回(
);
}
}
类InputForm扩展了React.Component{
状态={
输入：“”
};
//输入更改处理程序
onInput=（e）=>this.setState({
输入：e.target.value
});
//提交处理程序
onSubmit=（e）=>{
e、 预防默认值（）；
this.props.onSubmit（this.state.input）；
}
渲染（）{
返回(
添加到列表中
)
}
}
ReactDOM.render(
,
演示
);
我将通过将父对象从父组件传递到子组件，并直接从子组件访问父组件的方法，为您提供最简单的解决方案：

class App extends React.Component {
  constructor (){
      super();
      this.state = {
          items : []
      }
  }

  addTodo ( e ){
    e.preventDefault();

    let itemHeading = this.refs.todoInput.value; // TODO Access to input value
    let itemKey = Date.now();

    const items = this.state.items.slice();

    items.push({
      heading: itemHeading,
      key: itemKey
    })

    this.setState({items: items});
  }
  render() {
    return (
      <div className="app-container">
        <InputForm onSubmit={this.addTodo.bind(this)}></InputForm>
        <TodoItems entries={this.state.items} />
      </div>
    );
  }
}

class InputForm extends React.Component {
  render (){
    return (
      <form onSubmit={this.props.onSubmit}>
        <input
          ref="todoInput"
          type="text"
          placeholder="Type your text here" />
        <button type="submit">Add to list</button>
      </form>
    )
  }
}

class App extends React.Component {
  constructor (){
      super();
      this.state = {
          items : []
      }
  }

  addTodo ( value ){

    let itemHeading = value; 
    let itemKey = Date.now();

    const items = this.state.items.slice();

    items.push({
      heading: itemHeading,
      key: itemKey
    })

    this.setState({items: items});
  }
  render() {
    return (
      <div className="app-container">
        <InputForm parentObject={this}></InputForm>
        <TodoItems entries={this.state.items} />
      </div>
    );
  }
}

class InputForm extends React.Component {

this.onSubmit = this.onSubmit.bind(this);
this.onInput = this.onInput.bind(this);


 onSubmit()
 {
  //invoking parent component function directly by passing parameter to it. 
  this.props.parentObject.addTodo(this.state.value);
 }

onInput(e) {
    this.setState({
      input: e.target.value
    });
  }

  render (){
    return (
      <form onSubmit={this.props.onSubmit}>
        <input
          value={ this.state.value }
          onChange={ this.onInput }
          ref="todoInput"
          type="text"
          placeholder="Type your text here" />
        <button type="submit">Add to list</button>
      </form>
    )
  }
}

类应用程序扩展了React.Component{
构造函数（）{
超级（）；
此.state={
项目：[]
}
}
addTodo（值）{
设itemHeading=value；
让itemKey=Date.now（）；
const items=this.state.items.slice（）；
推({
标题：项目标题，
key:itemKey
})
this.setState（{items:items}）；
}
render（）{
返回(
);
}
}
类InputForm扩展了React.Component{
this.onSubmit=this.onSubmit.bind（this）；
this.onInput=this.onInput.bind（this）；
onSubmit（）
{
//通过传递参数直接调用父组件函数。
this.props.parentObject.addTodo（this.state.value）；
}
输入（e）{
这是我的国家({
输入：e.target.value
});
}
渲染（）{
返回(
添加到列表中
)
}
}
您想将值从哪个组件传递到哪个组件。@Codesingh我想从
InputForm
传递输入值，并在
App
组件的
addTodo
函数中使用它。您可以在我需要的行上看到TODO注释。可能是重复的