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功能组件时，它无法更改，只是始终处于选中状态。另外，它甚至不调用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]}
/>

React复选框取决于父状态

1 个答案: