Bootstrap 复选框未切换

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 属性。您确定更新父级中的新状态并再次传递新道具吗？

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

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>

编辑

Any experience in overriding the bootstrap.js? it is on the global template page of our app (PHP smarty)

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

Answer 2

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

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

你通过 onChange={} 告诉你的 parent 有一个新的名称和值 - 这将取决于 setState() 以传递新 [=14= 的方式]

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

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）或者绑定到你的本地状态，如果你在挂载时从 props 同步它并且当它获得 props 时.

Bootstrap 复选框未切换

Bootstrap Checkbox Not Toggling

checkbox

reactjs

react-bootstrap