从组件内部和外部更改属性或状态

Question

需要从组件内部和外部的两侧控制一些变量（例如布尔值）。或者更好地说我需要知道组件外部组件的状态

onClick() {
  this.setState({showToggle: true})
}

render() {
  return (
    <div>
      <input type="button" onClick={this.onClick}
      <ToggleComponent
        show={this.state.showToggle}
      />

    </div>
  )
)

和里面的 ToggleComponent

onHide() {
  this.props.show = false; //<--- it does not works but want something like that 
}

render() {
  if (!this.props.show) {
    return (
    );
  }
  
  return (<div>..........<input type="button" value="Hide" onClick={this.onHide}/></div>)
)

Answer 1

需要在父组件中实现onHide函数，并作为props传递。

新代码看起来像这样：

onClick() {
  this.setState({showToggle: true})
}

onHide() {
   this.setState({showToggle: false})
}

render() {
  return (
    <div>
      <input type="button" onClick={this.onClick}
      <ToggleComponent
        show={this.state.showToggle} onHide={this.onHide}
      />

    </div>
  )
)

和 ToggleComponent


render() {
  if (!this.props.show) {
    return (
    );
  }
  
  return (<div>..........<input type="button" value="Hide" onClick={this.props.onHide}/></div>)
)

Answer 2

如果不向子组件提供在父组件中更改 show 的功能，您将无法实际更改它。单独的州不会像这样绑定 this.state.show = false。必须使用 this.setState({show:!this.state.show})。 this.props也是一样，但是this.props不提供this.setProps()，你得自己“提供”。

有了 class 个组件中的状态，可以做这样的事情：

function Parent() {
    const [state,setState] = React.useState(false);

   return (
    <Child state={state} setState={setState} /> 
    )
}

function Child(props) {
    
    // with this button, state in Parent will change
    return (
    <button onClick={() => {props.setState(!props.state)}>Click</button>
    )
}

没有 state managment system（这太过分了），你可能无法做到这一点。

Answer 3

好的...我为此创建了自己的解决方案....

魔法在于将 prop 包装成 object。

在parent组件

this.com1Handler = {state: false};
  return (<div>..........<input type="button" value="Hide" onClick={this.props.onHide}/></div>)

onClick() {
  this.com1Handler.state = true;
  this.setState({});
}

render() {
  return (
    <input type="button" value="go"  onClick={this.onClick}/>
    <Child myHandle={this.com1Handler} />
  )

}

在child中：

onClick() {
  this.props.myHandle.state = false
  this.setState({});
}

render() {
  if (!this.props.myHandle.state) return '';

return (<div>..........
      <input type="button" value="Hide" onClick={this.onClick}/>
      </div>)

}

从组件内部和外部更改属性或状态

Changing property or state from inside and outside component

reactjs

react-component

从组件内部和外部更改 属性 或状态

Changing property or state from inside and outside component

reactjs

react-component

从组件内部和外部更改属性或状态