引导复选框未切换

Question

我正在使用 Bootstrap 复选框和常规复选框。为什么 Bootstrap Checkbox 切换失败，而常规 input 字段切换成功？

onChange = (evt) => {
    const target = evt.target;
    const name = target.name;
    const value = target.type === 'checkbox' ? target.checked : target.value;
    this.setState({
        [name]: value
    });

    this.props.onChange({ name, value });
};
                    <input
                        name="unlimited"
                        type="checkbox"
                        checked={this.state.unlimited}
                        onChange={this.onChange} />
                    <Checkbox
                        name="unlimited"
                        onChange={this.onChange}
                        checked={this.state.unlimited}
                    >
                        UNLIMITED {this.state.unlimited.toString()}
                    </Checkbox>

编辑 我最初发布代码时犯了很多错误。以上是修正后的代码。

编辑 我确信这是一个错误，因为 Bootstrap JS 库正在干扰see here。

Answer 1

您正在通过props 将来自父级的值传递给Checkbox 的checked 属性。你确定你更新了 parent 中的新 state 并再次传递了一个新的 prop 吗？

这是使用您的代码的示例：

const { Checkbox } = ReactBootstrap;

class App extends React.Component {
  constructor(props) {
    super(props);
    this.state = {
      unlimited: false
    };
  }

onChange = (evt) => {
    const target = evt.target;
    const name = target.name;
    const value = target.type === 'checkbox' ? target.checked : target.value;
    this.setState({
        [name]: value
    });
};

  render() {
    const { unlimited } = this.state;
    return (
      <div>
        <input
            name="unlimited"
            type="checkbox"
            checked={this.state.unlimited}
            onChange={this.onChange} />
        <Checkbox
            name="unlimited"
            onChange={this.onChange}
            checked={this.state.unlimited}
        >
            UNLIMITED {this.state.unlimited.toString()}
        </Checkbox>
      </div>
    );
  }
}

ReactDOM.render(<App />, document.getElementById("root"));

<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet"/>
<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>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react-bootstrap/0.31.3/react-bootstrap.min.js"></script>
<div id="root"></div>

编辑

有覆盖 bootstrap.js 的经验吗？它在全球范围内 我们应用的模板页面（PHP smarty）

我不是 PHP 专家，但我想你可以有条件地渲染 bootstrap.js 的脚本标签，所以当你重定向到使用 react 应用程序的页面时，不要渲染 <script> 标签。

Answer 2

您有一个受控输入 - 请参阅 https://reactjs.org/docs/forms.html#controlled-components

在这种情况下，checked 绑定到你父组件的 prop fields={unlimited}

您通过 onChange={} 告诉您的父母有一个新的名称和值 - 它将由 setState() 以传递新的 fields.unlimited 的方式来决定

例如，您的有状态父母可以是：

class Foo extends Component {
  state = {
    unlimited: false
  }

  onChange = (name, value) => this.setState({[name]: value})

  render(){
    return <MyOtherComponent fields={this.state} onChange={this.onChange} />
  }
}

如果您的组件本身是有状态的（查看您的 handleChange），那么您可以转换为不受控制的 (https://reactjs.org/docs/uncontrolled-components.html) 或绑定到本地状态（如果您从 mount 上的 props 同步它并获得 props 时）。