Атрибут элемента JSX не изменяется с помощью onChange - PullRequest
Новая
       14

Атрибут элемента JSX не изменяется с помощью onChange

1 голос
/ 25 марта 2020

У меня в коде React есть элемент JSX с атрибутом value, который не изменяется правильно с помощью метода onChange. Сначала я использую React Hooks: 

  const [isBusiness, setIsBusiness] = useState(false);

Я использую эту константу в моем JSX: 

               <input
                  type="checkbox"
                  value={isBusiness} //here is the constant
                  id="isBusiness"
                  onChange={businessChange}
                  name="check"
                />

Мой метод onChange такой: 

  const businessChange = e => {
    if (e.target.value == true) {
      console.log(isBusiness);

      setIsBusiness(false);
    } else {
      console.log(isBusiness);

      setIsBusiness(true);
    }
  };

Я вижу, что происходит, и по какой-то причине он застрял на true:

enter image description here

Идея состоит в том, чтобы иметь возможность получить значение этого флажка (true или ложь) если она нажата или нет. Начальное значение - false.

Ответы [ 2 ]

3 голосов
/ 25 марта 2020

e.target.value == true всегда будет ложным, потому что e.target.value - это строка . Ваш isBusiness будет преобразован в "true" или "false", и оба значения "true" == true и "false" == true ложны.

Как правило, вы редко используете value с флажками и используете только value с флажками, если вы отправляете форму куда-то; он предоставляет значение для отправки (по умолчанию это "on"). Вместо этого используйте checked: 

<input
    type="checkbox"
    checked={isBusiness}
    id="isBusiness"
    onChange={businessChange}
    name="check"
/>

Затем 

const businessChange = e => {
    if (e.target.checked) {
      console.log(isBusiness);
      setIsBusiness(true);
    } else {
      console.log(isBusiness);
      setIsBusiness(false);
    }
};

Или просто: 

const businessChange = e => {
    console.log(isBusiness);
    setIsBusiness(e.target.checked);
};


const {useState} = React;

const Example = () => {
    const [isBusiness, setIsBusiness] = useState(false);

    const businessChange = e => {
        console.log(isBusiness);
        setIsBusiness(e.target.checked);
    };

    return (
        <input
            type="checkbox"
            checked={isBusiness}
            id="isBusiness"
            onChange={businessChange}
            name="check"
        />
    );
};

ReactDOM.render(<Example />, document.getElementById("root"));
<div id="root"></div>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react/16.12.0/umd/react.production.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react-dom/16.12.0/umd/react-dom.production.min.js"></script>

Примечание: Это немного путает с журналированием, потому что вы всегда регистрируете старое значение. :-) Вот версия, записывающая значение new : 

const {useState} = React;

const Example = () => {
    const [isBusiness, setIsBusiness] = useState(false);

    const businessChange = e => {
        console.log(e.target.checked);
        setIsBusiness(e.target.checked);
    };

    return (
        <input
            type="checkbox"
            checked={isBusiness}
            id="isBusiness"
            onChange={businessChange}
            name="check"
        />
    );
};

ReactDOM.render(<Example />, document.getElementById("root"));
<div id="root"></div>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react/16.12.0/umd/react.production.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react-dom/16.12.0/umd/react-dom.production.min.js"></script>

Однако я бы склонялся к тому, чтобы вообще не использовать флаг-флажок в обработчике, как показано keikai они не показывают правильную настройку флажка. Вот версия, регистрирующая новое значение (не старое): 

const {useState} = React;

const Example = () => {
    const [isBusiness, setIsBusiness] = useState(false);

    const businessChange = e => {
        console.log(!isBusiness);
        setIsBusiness(!isBusiness);
    };

    return (
        <input
            type="checkbox"
            checked={isBusiness}
            id="isBusiness"
            onChange={businessChange}
            name="check"
        />
    );
};

ReactDOM.render(<Example />, document.getElementById("root"));
<div id="root"></div>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react/16.12.0/umd/react.production.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react-dom/16.12.0/umd/react-dom.production.min.js"></script>
3 голосов
/ 25 марта 2020

Вы можете установить его правильно и просто, не используя event

  const businessChange = () => {
    setIsBusiness(!isBusiness);
  };


const App = () => {
  const [isBusiness, setIsBusiness] = React.useState(false);
  const businessChange = () => {
    console.log(!isBusiness);
    setIsBusiness(!isBusiness);
  };
  return (
    <div className="App">
      <input
        type="checkbox"
        value={isBusiness} //here is the constant
        id="isBusiness"
        onChange={businessChange}
        name="check"
      />
    </div>
  );
}
ReactDOM.render(<App />, document.getElementById("root"));
    <div id="root"></div>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/react/16.12.0/umd/react.production.min.js"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/react-dom/16.12.0/umd/react-dom.production.min.js"></script>
...