Лучший способ контролировать флажки во время обновления | ReactJS - PullRequest
0 голосов
/ 26 января 2020

Предположим, у меня есть форма для публикации. Есть флажки. (Тип Bool, получает 0 и 1). Создает логи c следующим образом.

 "is_has_n": values.is_has_n === true ? 1 : 0,

Возвращает значения 1 и 0, если true (1) и false (0). Это работает без ошибок, пока я создавал этот пост. Если я хочу редактировать этот пост, у меня есть некоторые проблемы. Так что этот флажок был правдой раньше, а теперь он должен быть ложным для меня. Поэтому я могу снять флажок, когда я редактирую сообщение. У меня есть следующая форма:

{
data.is_has_n === 1 ?
 (
    <Form.Check
        onChange={handleChange}
        name="is_has_n"
        defaultChecked={true}
        isInvalid={touched.is_has_n&& !!errors.is_has_n}
        type="checkbox"
        label="Label 
    />
) :
(
    <Form.Check
        onChange={handleChange}
        name="is_has_n"
        defaultChecked={false}
        isInvalid={touched.is_has_n&& !!errors.is_has_n}
        type="checkbox"
        label="Label
    />
 )

Это для меня сейчас, если я хочу установить флажок true в false. Поэтому я хочу, чтобы это не проверялось во время обновления psot. Я имею в виду. Что я могу сделать, чтобы проверить, что мой контроль проверен или не отмечен перед отправкой данных? Также следует отметить, что есть несколько ошибочных нажатий. Я также думал о создании метода isChecked, но я не думаю, что это будет решением. Потому что флажки могут быть нажаты несколько раз перед сохранением.

EDITED | ИСПРАВЛЕНО Я нашел решение для этого: я сделал так:

const [IsDangerous, setIsDangerous] = useState(data.dangerous_status === 1 ? true : false);

И моя функция изменения дескриптора

if (name === "dangerous_status") {
        console.log(isChecked);
        setFieldValue(name, isChecked);
        if (isChecked) {
            console.log("dangerous_status", true);
            setIsDangerous(true);
        } else {
            setIsDangerous(false);
            console.log("dangerous_status", false);
        }
    }

1 Ответ

1 голос
/ 26 января 2020

Вопрос кажется неясным, но я думаю, что вы должны использовать контролируемые компоненты, тем самым контролируя значения поля ввода с помощью состояния. См. https://reactjs.org/docs/forms.html.

<input type="checkbox" value={this.state.inputValue} onChange={this.handleChange} />

«значение» связывает входные данные с полем состояния inputValue, которое изменяется handleChange. Управляйте значением inputValue, чтобы контролировать, что показывать в поле ввода.

Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.
...