反应复选框取决于父状态

Question

在我的父组件中，我有一个基于关闭状态呈现检查的常规组件，它可以调用一个函数：

<input
    name='shiftOne'
    type='checkbox'
    onChange={() => this.onCheck('shiftOne')}
    checked={this.state.shiftBools['shiftOne']}
/>

这工作正常，除了控制台中的警告说我正在从控制和非控制切换，但它不会破坏任何东西。

尝试使用 React 方式，我将这个 Checkbox 分离到它的功能中：

function Checkbox (props) {
  return (
    <div>
      <label>
        <input
          type='checkbox'
          name={props.name}
          checked={props.checked}
          onChange={() => props.handleCheckChange(props.name)}
        />
        {props.text}
      </label>
    </div>
  )
}
export default Checkbox

然后我在我的根应用组件中渲染它：

<Checkbox
    checked={this.state.shiftBools.shiftOne}
    name={'shiftOne'}
    onChange={() => this.handleCheckChange('shiftOne')}
    text={shiftOne[0] + ' ' + shiftTwo[1]}
/>

当我使用 Checkbox 功能组件时，它的 on change 不起作用，它总是保持选中状态。此外，它甚至不调用 onChange 中的函数。我尝试在其中进行 console.log，但它没有被调用：

 handleCheckChange = () => {
    console.log(1)
    this.setState({
      shiftBools: {
        ...this.state.shiftBools,
        shiftOne: this.state.shiftOne
      }
    })
  } 

我正在尝试在 React 中进行更多思考，并且仅使用父类中的输入就可以正常工作，我只是不确定为什么功能组件不起作用。所有数据都处于我的父状态，是否选中复选框取决于我在该状态下的数据。

* 编辑 *

我把功能组件改成了Class组件：

class Checkbox extends Component {
  constructor(props) {
    super(props);

    this.handler = this.handler.bind(this);
  }

  handler() {
    this.props.onCheck(this.props.name);
  }

  render() {
    return (
      <label>
        <input
          type="checkbox"
          name={this.props.name}
          checked={this.props.checked}
          onChange={this.handler}
        />
        {this.props.text}
      </label>
    );
  }
}

现在我通过一个处理函数来处理父函数。我还绑定了父函数，因为我以前没有：

this.onCheck = this.onCheck.bind(this);

现在我的复选框在父函数中呈现如下：

<Checkbox
  name={"shiftOne"}
  checked={this.state.shiftBools.shiftOne}
  onCheck={this.onCheck}
/>

这篇文章帮助了我：How do I define methods in stateless components? 虽然我的问题有点含糊。感谢您的所有帮助。

Answer 1

你需要改变你调用onChange处理程序的方式

改变

onChange={() => props.handleCheckChange(props.name)} 

到

onChange={props.handleCheckChange(props.name)}

另外，将处理程序向下传递的方式将props更改为复选框组件

<Checkbox
    checked={this.state.shiftBools.shiftOne}
    name={'shiftOne'}
    onChange={this.handleCheckChange('shiftOne')}
    text={shiftOne[0] + ' ' + shiftTwo[1]}
/>