ReactJS и логические значения

Question

Изучая React, я обнаружил, что по какой-то причине он не работает по-булевски, как я привык, и я не могу понять его.

Я попробовал несколько методов чтобы исправить это, но безуспешно, и я в основном собираюсь отказаться от React. jQuery мне намного проще.

Я понимаю, что React сохраняет ложное значение как строку в состояние и затем интерпретирует его как истинное. Но мне не удалось найти способ сохранить его как логическое значение или преобразовать его в логическое значение.

Слышал ли React о логическом значении?!?!

Посмотрите на скрипку и, пожалуйста, скажи мне, что мне не хватает ... или, по крайней мере, укажи мне правильное направление. Схожу с ума по этому вопросу целый день.

https://jsfiddle.net/nicholas_cb/btye84j2/14/

function Options(props) {

    /* TRIED TO FIX IT THIS WAY SO AS TO SET CHECKD VALUES TO BOOLEAN INSTEAD OF STRING AND CHANGING THE CHECKED VALUE TO LOCAL VARIABLES -- OBVIOUSLY DIDN'T WORK... x_X

    let optionValue1 = (props.optionValue1 == true);
    let optionValue2 = (props.optionValue2 == true);

    */

    console.log("Options received: optionValue1 = " + props.optionValue1 + " optionValue2 = " + props.optionValue2);
        let result = "Options received: optionValue1 = " + props.optionValue1 + " optionValue2 = " + props.optionValue2;

    return (
    <div>
    <br/>
    <label>{result}</label>
    <br/><br/>
    <label>Option One</label><input name="optionValue1" type="checkbox" checked={props.optionValue1} onChange={props.handleChange}/>
        <label>Option Two</label><input name="optionValue2" type="checkbox" checked={props.optionValue2} onChange={props.handleChange}/>
      </div>
    )

}

class Form extends React.Component {
   constructor(props){
       super(props)
   }

    render() {
    if(this.props.optionValue1 == true && this.props.optionValue2 == true) {
    console.log("TRUE/TRUE");
    return (
     <Options 
       optionValue1 = {this.props.optionValue1}
       optionValue2 = {this.props.optionValue2}
       handleChange = {this.props.handleChange}
     />
    )
    }

        if(this.props.optionValue1 == false && this.props.optionValue2 == true) {
    console.log("FALSE/TRUE");
    return (
     <Options 
       optionValue1 = {this.props.optionValue1}
       optionValue2 = {this.props.optionValue2}
       handleChange = {this.props.handleChange}
     />
    )
    }

        if(this.props.optionValue1 == false && this.props.optionValue2 == false) {
    console.log("FALSE/FALSE");
    return (
     <Options 
       optionValue1 = {this.props.optionValue1}
       optionValue2 = {this.props.optionValue2}
       handleChange = {this.props.handleChange}
     />
    )
    }

        if(this.props.optionValue1 == true && this.props.optionValue2 == false) {
    console.log("TRUE/FALSE");
    return (
     <Options 
       optionValue1 = {this.props.optionValue1}
       optionValue2 = {this.props.optionValue2}
       handleChange = {this.props.handleChange}
     />
    )
    }

    console.log("Matched no case.");
    return (
      <Options 
       optionValue1 = {this.props.optionValue1}
       optionValue2 = {this.props.optionValue2}
       handleChange = {this.props.handleChange}
     />
    )
  }


}

class FormContainer extends React.Component {

constructor(props) {
  super(props)

  this.state = {
    optionValue1: true,
    optionValue2: true,
  }

  this.handleChange = this.handleChange.bind(this)

}

    handleChange(event) {

        if(event.target.type == 'checkbox'){
            console.log("Checkbox changing: " + event.target.name);
            console.log("New value: " + event.target.checked);

                event.target.value = event.target.checked;

        }

        const {name, value} = event.target

        this.setState({
            [name]: value
        })
    }

  render() {
    return (
        <Form
        handleChange={this.handleChange}
        optionValue1={this.state.optionValue1}
        optionValue2={this.state.optionValue2}
      />
    )
  }
}

ReactDOM.render(
  <FormContainer />,
  document.getElementById('container')
);

Я вывел все случаи на консоль, такие как TRUE / TRUE, FALSE / TRUE et c. Меня также удивляет, что по какой-то причине это не соответствует ни одному делу? Что с этим? Откуда это? Если он интерпретирует это как истину / ложь, не должен ли он всегда соответствовать одному из случаев?

Спасибо

Answer 1

Я потратил 10 минут, чтобы вы не разочаровались в React. Это намного лучше, чем jQuery

Прежде всего, используйте некоторые лучшие инструменты, чем jsfiddle. это не для быстрой разработки, это просто для кода, который может быть плохо написан в одном файле. Используйте Codesandbox.io

Проверьте эту песочницу и дайте мне знать, если все еще есть путаница

https://codesandbox.io/s/dazzling-bassi-l7pg8?file= / src / App. js

Что вы делаете неправильно, так это то, что вы используете значения состояния для установки / снятия флажков, но в handleChange callback

handleChange(event) {
        if(event.target.type == 'checkbox'){
            // This is wrong, don't change dom yourself if you are using controlled component
           // https://medium.com/@AndrewBonner2/controlled-components-in-react-920f3e795d87
            event.target.value = event.target.checked; 
        }
        // const {name, value} = event.target;
        // SHould be 
        // const { name, checked } = event.target;
        this.setState({
            // [name]: value
            // SHould be
             [name]: checked 
        })
    }