如何从父组件更改孩子的状态

时间:2018-08-20 20:06:17

标签: javascript reactjs redux parent-child state-management

所以我有一个React网页。

父组件包含所有子组件(下拉菜单,单选按钮,表格等)。一旦我用按钮提交了所有表单,我希望所有组件状态都返回null。

在没有Redux的情况下是否有可能?我知道我绝对应该在这一点上使用Redux,并且我将在接下来的几天里开始学习它,但是在我开始尝试之前,如果我想做的事情是可能的/不可能的,我只是想把头缠起来。没有React。

只是为了省心和充分理解。

4 个答案:

答案 0 :(得分:5)

您可以将所有状态值保留在父组件中,并通过更改处理程序将其作为道具传递给您的演示组件。然后,您可以在提交表单时重置整个状态。这可能是最“反应灵敏”的方式。

如果您不想这样做,可以将“重置”道具传递给每个子组件,当该道具变为true时,重置状态,然后重置父项“重置”道具回到假。但是,我个人认为这不是实现此目的的好方法,因此强烈建议您选择第一种方法。

编辑:您绝对不需要引入redux即可完成您要执行的操作

答案 1 :(得分:1)

在我投票时,我建议使用@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版本在这里有点老了。

答案 2 :(得分:0)

父组件可以具有reset状态,该状态由表单提交按钮触发,并将其作为道具传递给其子级,在您的情况下,所有表单元素(下拉菜单,单选按钮,表格,等)。

然后,孩子们可以在其生命周期挂钩(componentWillReceiveProps或getDerivedStateFromProps)中对此reset道具做出反应。

答案 3 :(得分:-1)

一些简单的选项:

1)重新加载整个页面:

  location.reload();

2)重新安装App组件:

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