如何在React组件上管理状态，该组件可以从父级或事件中的事件更改状态？

3 回答

• 7

  您可以将复选框视为一个哑组件，这意味着它不包含任何内部状态，但只通过道具从外部接收数据然后再渲染它们 . 你可以看到哑组件here的详细定义 .

  同时，当单击该复选框时，此类事件将由组件的父级或事件祖先处理，这称为逆数据流，这在Facebook的Thinking in React博客文章中有所描述 .

  此外，为了确定哪个组件应该具有某些状态，我发现以下指南非常有用：

  请记住：React是关于组件层次结构中的单向数据流 . 可能不会立即清楚哪个组件应该拥有哪个状态 . 这通常是新手理解中最具挑战性的部分，因此请按照以下步骤进行解决：对于应用程序中的每个状态：确定基于该状态呈现某些内容的每个组件 . 查找公共所有者组件（在层次结构中需要状态的所有组件上方的单个组件） . 公共所有者或层次结构中较高层的其他组件应该拥有该状态 . 如果找不到拥有状态的组件，只需创建一个新组件来保存状态，并将其添加到公共所有者组件上方的层次结构中的某个位置 .

  伪代码片段：

  const Checkbox = React.createClass({
    // Propagate the event to parents
    onClick(evt) {
      if (this.props.handleClick) {
        this.props.handleClick({checked: evt.target.value});
      }
    },
  
    render() {
      return (
        this.props.checked ? 
          <Input onClick={this.onClick} type="checkbox" label="Checkbox" checked></Input> : 
          <Input onClick={this.onClick} type="checkbox" label="Checkbox"></Input>
      );
    }
  });
  
  const Container = React.createClass({
    handleClick(evt) {
      // Change the container's state, which eventually changes the checkbox's view via props.
      this.setState({checked: evt.checked});
    },
  
    render() {
      return (
        <div><Checkbox checked={this.state.checked} handleClick={this.handleClick}></Checkbox></div>
      );
    }
  });
  

  回复于 2024-04-28T21:42:50+08:00
• -2

  您只从父级更改它 .

  class ParentComponent extends React.Component{
    handleChildCheck(){
      this.setState({
       childChecked: !this.state.childChecked
      })
    }
    render(){
      return(
        <ChildComponent checked={this.state.childChecked} handleCheck={this.handleChildCheck.bind(this)} />
      )
   }
  }
  

  现在，如果您希望从 <ChildComponent/> 控制已检查状态，只需从 <ChildComponent/> 调用 this.props.handleCheck()

  这样，控件将始终在 <ParentComponent/> 中通过 this.props.handleCheck() this.handleChildCheck() 中的 <ChildComponent/> 中可用 .

  回复于 2024-04-28T21:42:50+08:00
• 3

  使用querySelectorAll查找组件 . 添加事件侦听器以监视更改 . 在更改时运行另一个querySelectorAll来查找子项并禁用或启用 . 这可能无法满足您的所有需求，但它会让您开始朝着正确的方向前进 . 这是普通的JavaScript，因此不需要其他库 .

  // Finds radios with class on-off and disables 'name-on' elements when
  // 'name' is off.
  
  function initOfOff() {
    var mains = document.querySelectorAll('.on-off');
  
    for (var i = 0; i < mains.length; i++) {
      var el = mains[i];
      var name = el.getAttribute('name');
      el.addEventListener('click', function() {
        var value = this.getAttribute('value');
        var children = document.querySelectorAll('.' + name + '-on');
        for (var i = 0; i < children.length; i++) {
          var child = children[i];
          child.checked = false;
          if (value == "off") {
            child.setAttribute('disabled', 'disabled');
          } else {
            child.removeAttribute('disabled');
          }
        }
      });
    }
  }
  initOfOff()
  

  <form name='myform'>power
    <input type='radio' value='on' class='on-off' name='power'>ON |
    <input type='radio' value='off' class='on-off' name='power'>Off
    <dir>lights
  
      <input type='radio' value='on' class='power-on' name='lights'>ON |
      <input type='radio' value='off' class='power-on' name='lights'>OFF
    </dir>
  </form>
  

  回复于 2024-04-28T21:42:50+08:00