Reactjs 从子组件更新列表数组

新用户在这里

我正在尝试从子窗体访问父应用程序中的窗体数据。我试图提醒或控制来自父级的数据，以便可以直观地看到表单中键入的内容。一旦可以访问父级中的数据，我将尝试将其移动到列表数组中

母公司

class App extends Component {

    constructor() {
    super();
    this.state = {
    lists: [], 
    items: {} 
    };
}

handleAddList(s) {
     alert('I am calling function from child')

     console.log(this.refs.id.value) // this errors out on me
}

 render() {
 return (
    <div className="App">
    <AddList addList={this.handleAddList.bind(this)} />
    <div id="listsDiv" className="List">
    <Lists lists={this.state.lists} items={this.state.items} addItem {this.handleAddItem.bind(this)} />
    </div>
    </div>
 );
 }

 }

class App extends Component {

handleAddList(args) {
   console.log(args);
}

render() {
   return (
    <div className="App">
      <AddList addList={this.handleAddList.bind(this)} />
   </div>
   );
  }
 }

孩子

孩子

母公司

class App extends Component {

    constructor() {
    super();
    this.state = {
    lists: [], 
    items: {} 
    };
}

handleAddList(s) {
     alert('I am calling function from child')

     console.log(this.refs.id.value) // this errors out on me
}

 render() {
 return (
    <div className="App">
    <AddList addList={this.handleAddList.bind(this)} />
    <div id="listsDiv" className="List">
    <Lists lists={this.state.lists} items={this.state.items} addItem {this.handleAddItem.bind(this)} />
    </div>
    </div>
 );
 }

 }

class App extends Component {

handleAddList(args) {
   console.log(args);
}

render() {
   return (
    <div className="App">
      <AddList addList={this.handleAddList.bind(this)} />
   </div>
   );
  }
 }

---

编辑它一点为您工作

您应该使用回调对输入设置ref，如下所示：

<input type='text' ref={input => { this.input = input; }} id='newID'></input>

alert(this.input.value);

但是，如果您不熟悉反应，则应在尝试使用参照之前尝试使用受控组件