从子

Question

我对React很新（所以这可能非常简单）并且在尝试在一个简单的应用程序上尝试更改父组件中的状态时，我被困住了。

要使应用程序正常工作，父组件必须保持状态，然后传递给其他组件。因此，我创建了一个状态更改功能，我传递给孩子。请参阅以下代码：

JS：

class App extends React.Component {
  constructor(props) {
    super(props);
    this.state = {
      status: [
        {
          id: 1,
          name: 'Item 1',
          selected: false
        }, {
          id: 2,
          name: 'Item 2',
          selected: false
        }]
    }
  }

  addItem(name) {
    let id = this.props.status.length + 1;
    let newItem = this.props.status;
    newItem.push({id, name, selected: true});
    this.setState({
      status: newItem
    });
  }

  render() {
    return (
        <div><ItemList status={this.state.status} addItem={this.addItem} /></div>
    );
  }
}

class ItemList extends React.Component {
  constructor(props) {
    super(props);
    this.state = {
      search:'',
    };
  }

  handleAddSubmit(event) {
    event.preventDefault();
    let name = this.refs.newit.value;
    this.props.addItem(name);
    this.refs.newit.value='';
  }

  updateSearch(event) {
    this.setState({search: event.target.value});
  }

  render() {
    let filteredItems = this.props.status.filter((item)=> {
      return item.name.toLowerCase().indexOf(this.state.search.toLowerCase()) !== -1;
    });
    return (
    <div>
        <div>
          <input placeholder="Search" type="text"
          value={this.state.search}
          onChange={this.updateSearch.bind(this)}/>
        </div>
        <div>
          {filteredItems.map((item) => {
            return (<button id={item.id}>{item.name}</button>
            );
          })}
          <form onSubmit={this.handleAddSubmit.bind(this)}>
          <input type="text" placeholder="enter your item" ref="newit"/>
          </form>
        </div>
      </div>
      );
  }
}


 ReactDOM.render(<App/>, document.getElementById('app'));

HTML：

<div id="app"></div>

我理解代码是如何错误的，addItem函数无法访问状态，但我不确定如何解决它。我试图将状态从父级传递给子级作为prop，然后作为addItem的变量备份，但这也不起作用（参见下面的代码）。另外，我玩过.bind（this）和.bind（null）没有成功（我不太了解React auto和this绑定之间的区别）。

  addItem(oldStatus, name) {
    let id = oldStatus.length + 1;
    let newItem = oldStatus;
    newItem.push({id, name, selected: true});
    this.setState({
      status: newItem
    });
  }

我不确定我是否正在尝试做一些不可能的事情，不可取或者只是一个简单的错误。我已经检查过这里的许多问题和官方教程，但他们只是使用传递给函数的参数setState而不是尝试访问状态（在我的情况下计算id）。我也研究了各种教程，因为我认为这是一个基本的概念，但还没有找到解决方案。

感谢您的帮助。

最佳，

中号

编辑：我创建了一个包含代码的jsfiddle：https://jsfiddle.net/magp/cw8h2pzk/4/

Answer 1

您可以打开控制台查看错误。

  

一个错误是关于没有用.bind（this）绑定你的addItem。

您应该将此绑定到传递的方法。它们可能会在dom或其他组件中调用，因此这种情况会发生变化。但是，如果在传递时绑定它，则上下文将是组件。你的this.state ...语句将按预期工作。

  

另一个错误是每个孩子都应该有一个唯一的密钥。

这意味着如果您要映射数组或者简单地迭代数据并返回jsx，则返回的每个jsx都应该有一个唯一键。

这是工作的jsfiddle。我改变的字段如下。

<form onSubmit={this.handleAddSubmit.bind(this)}>

{filteredItems.map((item) => {
   return (<button id={item.id} key={item.id}>{item.name}</button );
})}

https://jsfiddle.net/8v2cu95x/1/