如何从 parent 组件更改 child 的状态

Question

所以我有一个 React 网页。

parent 组件包含所有 children 组件（drop-downs、单选按钮、表格等）一旦我使用按钮提交所有表单，我想要所有组件状态为 return 为空。

如果没有 Redux，这可能吗？我知道此时我绝对应该使用 Redux，并且我将在接下来的几天内开始学习它，但是在开始之前我想先想一想如果我想做的是 possible/impossible 没有反应。

只为安心，充分了解。

Answer 1

您可以将所有状态值保留在父组件中，并将它们作为带有更改处理程序的道具传递给您的展示组件。然后你可以在提交表单时重置整个状态。这可能是最 "react-y" 的方法。

如果你不想这样做，你可以将一种 "reset" 属性传递给你的每个子组件，当这个属性变为真时，重置状态，然后重置父组件"reset" 支持返回 false。但是，我个人认为这不是一个很好的方法，强烈推荐第一个选项。

编辑：你绝对不需要引入 redux 来完成你想要做的事情

Answer 2

几个简单的选项：

1) 重新加载整个页面：

  location.reload();

2) 重新挂载App组件：

 reactDOM.unmount(document.body);
 reactDOM.render(<App />, document.body);

Answer 3

Parent 组件可以有一个由表单提交按钮触发的 reset 状态，并将其作为道具传递给它的 children，在您的情况下是所有表单元素（drop-downs、单选按钮、表格等）。

然后 children 可以在其 life-cycle 钩子（componentWillReceiveProps 或 getDerivedStateFromProps）中对这个 reset 道具做出反应。

Answer 4

正如我所赞成的那样，我推荐@Nick Swope 的逻辑。不过，我想举两个例子。我不确定这是否适合您的情况，但这里是示例。

class App extends React.Component {
  state = {
    name: "",
    select: "",
  }

  defaultState = {
    name: "",
    select: "",
  };


  handleChane = e => this.setState( {
    [ e.target.name ]: e.target.value,
  } );

  handleSubmit = ( e ) => {
    e.preventDefault();
    alert( JSON.stringify( this.state ) );
    this.setState( this.defaultState );
  }

  render() {
    console.log( this.state );
    return (
      <form onSubmit={this.handleSubmit} >
        <Input onChange={this.handleChane} />
        <Select onChange={this.handleChane} />
        <button>Send</button>
      </form>
    );
  }
}

const Input = props => (
  <div>
    <input onChange={props.onChange} name="name" />
  </div>
);

const Select = props => (
  <div>
    <select onChange={props.onChange} name="select">
      <option>Choose one</option>
      <option>Foo</option>
      <option>Bar</option>
      <option>Baz</option>
    </select>
  </div>
);

ReactDOM.render(
  <App />,
  document.getElementById("root")
);

<script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.1.0/react.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.1.0/react-dom.min.js"></script>
<div id="root"></div>

在此示例中，您保持默认状态，并在提交表单后重置状态。如您所见，表单值仍然存在。现在，这是第二个选项：

class App extends React.Component {
  state = {
    name: "",
    select: "",
  }

  defaultState = {
    name: "",
    select: "",
  };

  formRef = React.createRef();

  handleChane = e => this.setState( {
    [ e.target.name ]: e.target.value,
  } );

  handleSubmit = ( e ) => {
    e.preventDefault();
    alert( JSON.stringify( this.state ) );
    this.setState( this.defaultState );
    this.formRef.current.reset();
  }

  render() {
    console.log( this.state );
    return (
      <form ref={this.formRef} onSubmit={this.handleSubmit} >
        <Input onChange={this.handleChane} />
        <Select onChange={this.handleChane} />
        <button>Send</button>
      </form>
    );
  }
}

const Input = props => (
  <div>
    <input onChange={props.onChange} name="name" />
  </div>
);

const Select = props => (
  <div>
    <select onChange={props.onChange} name="select">
      <option>Choose one</option>
      <option>Foo</option>
      <option>Bar</option>
      <option>Baz</option>
    </select>
  </div>
);

在这里，您可以休息您的状态并使用 ref 清除您的表单。我不能把它放到代码片段中，因为这里的 React 版本有点旧。

如何从 parent 组件更改 child 的状态

How can I change a child's state from the parent component

javascript

parent-child

state-management

reactjs

redux