Question

简介

我只是开始反应，但我有一个项目，我希望能够从子组件影响父状态（或者不管它是什么）。

最终结果是获得可以即时编辑的联系人列表。

问题：

简化可能的最简单的方法，我可能是从TodoApp（来自React的网站）开始，我稍微修改了一下。而不是具有从状态静态构造的列表项

ParentState ---> Content

我希望能够拥有这样的东西

ParentState <--> ContentInput

我的问题状态：

以下代码是我坚持的地方。下面有评论。我希望这种影响会影响TodoApp的州。也许我弄错了，如果是这样，那么正确的方法是什么？

class TodoApp extends React.Component {
  constructor(props) {
    super(props);
    this.state = { items: [] };
    this.handleSubmit = this.handleSubmit.bind(this);
    this.showState = this.showState.bind(this);
  }
  render() {
    return (
      <div>
        <h3>TODO</h3>
        <button onClick={this.showState}>Console log current state</button>
        <TodoList items={this.state.items} />
        <form onSubmit={this.handleSubmit}>
          <input ref="field" />
          <button>
            Add #{this.state.items.length + 1}
          </button>
        </form>
      </div>
    );
  }
  handleSubmit(e) {
    e.preventDefault();
    if (!this.refs.field.value.length) {
      return;
    }
    const newItem = {
      text: this.refs.field.value,
      id: Date.now()
    };
    this.setState(prevState => ({
      items: prevState.items.concat(newItem)
    }));
  }
  showState() {
    console.log(this.state)
  }
}

class TodoList extends React.Component {
  render() {
    return (
      <ul>
        {this.props.items.map(item => (
          // MAKE THAT INPUT CHANGE THE PARENT STATE
          <li key={item.id}><input type="text" defaultValue={item.text} /></li>
        ))}
      </ul>
    );
  }
}

ReactDOM.render(<TodoApp />, document.getElementById('root'))

Answer 1

如果您确实需要父母与其渲染树深处之间的直接沟通，那么您通常会遇到一个有问题的设计，应该将其划分为单个父子沟通步骤，以便您可以在每个步骤中询问“ 这个特定的孩子是否真的有必要与这个特定的父母谈话？“。

也就是说，显而易见的React方法是传递一个函数处理程序，以便子节点可以将数据传播给父节点，然后父节点就可以“执行必要的操作”：

data.json()

然后让孩子在需要时调用其class Parent extends Component { onChange(e) { ... } render() { return <Child onChange={e => this.onChange(e)}/> } }来触发父项中的功能。如果您需要在孩子的孩子身上发生这种情况，那么您可以根据需要继续传递它。

或者，如果你有一个距离要覆盖，你可能需要的是“可能是某个组件，我不知道哪个，我不关心”根据生成的事件做某事。在这种情况下，您可以使用在文档上调度的标准JS自定义事件，也可以使用像flux这样的dipatching服务（对于小用例，这是荒谬的过度杀伤）。

如何使子进程影响父状态的反应

1 个答案: