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

您通过checked从父母传递Checkbox props个值的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"));道具。您确定更新了父级中的新状态并再次传递新的支柱吗？

以下是使用您的代码的示例：

＆＃13;

<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>

＆＃13;

bootstrap.js

＆＃13;

修改

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

我不是PHP专家，但我想您可以有条件地呈现react的脚本标记，因此，当您重定向到使用<script>应用程序的页面时，只需要“ t呈现static void Main(string[] args) { string menuChoice; string response; var accountList = new List<Account>(); // Welcome/Menu screen Console.WriteLine("\nWelcome to your Net Worth Calculator.\n \n MENU:\n 1. Add Asset\n 2. Add Debt\n 3. View Summary"); do { Console.WriteLine(" "); Console.WriteLine("What would you like to do?\nPlease make a selection: "); menuChoice = Console.ReadLine(); if (menuChoice == "1") { do { //D1 Account asset = new Account(); Console.WriteLine("\nGreat! Let's add an account."); Console.WriteLine("Account name:"); asset.name = Console.ReadLine(); Console.WriteLine("Your account name is: " + asset.name); Console.WriteLine("\nWhat is your current account balance with " + asset.name + "?"); Console.WriteLine("Balance:"); asset.balance = Decimal.Parse(Console.ReadLine()); accountList.Add(asset); Console.WriteLine("Your balance with " + asset.name + " is currently $" + asset.balance + "."); Console.WriteLine("\n\nWould you like to add another account? y/n"); response = Console.ReadLine(); } while (response != "n"); } if (menuChoice == "3") { //D3 Console.WriteLine("Let's take a look at the accounts and balances that you've added so far:"); Console.WriteLine($"{asset.balance} is your asset, and {debt.balance} is your debt."); decimal netWorth = asset.balance - debt.balance; Console.WriteLine(netWorth); Console.WriteLine($"{ asset.balance}"); Console.WriteLine("\n\nWould you like to add another account? y/n"); response = Console.ReadLine(); }标记。

Answer 2

you have a controlled input - see 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和它获得道具同步它。

Bootstrap复选框不切换

2 个答案: