Question

我在我的父TodoList组件中有这个：

state = {
  checkedIds: []
}
_handleSelectedTodo = (e) => {
  e.preventDefault(); 
  this.setState({checkedIds: [...this.state.checkedIds, e.value]});
}

将_handleSelectedTodo作为道具传递给Todo组件，如此

<Todo
  key={edge.node.id}
  todo={edge.node}
  viewer={this.props.viewer}
  handleSelectedTodo={this._handleSelectedTodo}
/>

以下是我的Todo组件的代码：

<li>
  <input
    checked={this.props.todo.complete}
    className="toggle"
    onChange={this.props.handleSelectedTodo.bind(null)}
    type="checkbox"
    value={this.props.todo.id}
  /> 
  {this.props.todo.text+' - '+this.props.todo.complete}

我想将此处的值传递给父e.target.value，但我无法成功更改TodoList父checkedIds的状态。帮助

Answer 1

首先它应该是e.target.value而不是e.value

_handleSelectedTodo = (e) => {
  // here add your logic for update the completed flag depending on the value of the id 
  this.setState({checkedIds: [...this.state.checkedIds, e.target.value]});
}

传递回调是没有绑定的（因为你已经在todoList中使用了箭头函数）

<input
    checked={this.props.todo.complete}
    className="toggle"
    onChange={this.props.handleSelectedTodo}
    type="checkbox"
    value={this.props.todo.id}
  />

另外，我认为你仍然需要处理取消选中复选框（从数组中删除）

https://codepen.io/kossel/pen/XRZPdK

Answer 2

子

<input type="text" onChange={event => this.props.onInputChange(event.target.value)}/>

父

onInputChange(filter){
    console.log(filter)
  }


<child onInputChange ={this.onInputChange.bind(this)}/>

如何从输入类型将值传递给我的父React组件？

2 个答案: