HTML + React: кнопка "Радио", прикрепленная к той, которая первоначально была установлена как "отмеченная",

У меня есть набор из двух переключателей, один из которых проверяется при загрузке страницы. Похоже, я не могу изменить его на второй. HTML строится реакцией, если это имеет значение. Разметка на хроме выглядит так:

<fieldset data-reactid=".0.0.0.0.0.0.1">
<label for="coop-radio-btn" data-reactid=".0.0.0.0.0.0.1.0">
    <span data-reactid=".0.0.0.0.0.0.1.0.0">To a Cooperative</span>
    <input type="radio" name="requestOnBehalfOf" value="coop" id="coop-radio-btn" data-reactid=".0.0.0.0.0.0.1.0.1">
</label>
<label for="union-radio-btn" data-reactid=".0.0.0.0.0.0.1.1">
    <span data-reactid=".0.0.0.0.0.0.1.1.0">Additional Request</span>
    <input type="radio" name="requestOnBehalfOf" value="union" checked="" id="union-radio-btn" data-reactid=".0.0.0.0.0.0.1.1.1">
</label>
</fieldset>

Ответ 1

Причиной этого было то, что React создавал управляемые компоненты input, потому что значения для каждого входа устанавливаются со стороны сервера.

Цитата из Ответ Брэндона:

Если вы добавите на вход свойство value={whatever}, что делает его контролируемым компонентом, то оно доступно только для чтения, если вы добавите обработчик onChange, который обновляет значение whatever. Из React docs:

Почему контролируемые компоненты?

Использование компонентов формы, таких как <input> в React, представляет проблему, отсутствующую при написании традиционной формы HTML. Например, в HTML:
<input type="text" name="title" value="Untitled" />
Это отображает вход, инициализированный значением Untitled. Когда пользователь обновит ввод, значение свойства node изменится. Однако node.getAttribute('value') все равно вернет значение, используемое во время инициализации, Untitled.

В отличие от HTML, компоненты React должны представлять состояние представления в любой момент времени, а не только во время инициализации. Например, в React:
render: function() {
  return <input type="text" name="title" value="Untitled" />;
}
Поскольку этот метод описывает представление в любой момент времени, значение ввода текста всегда должно быть Untitled.

Самое простое решение, которое я нашел, это добавить onChange={function(){}} в input s.

Ответ 2

Обновление "способ реагирования" заключается в том, чтобы добавить defaultChecked={true} к нужному вводу. Ниже перечислены другие способы.

Я действительно столкнулся с такой же ситуацией. То, что я сделал, это найти тег input в componentDidMount методе жизненного цикла родительского компонента React и установить атрибут checked, затем.

Если говорить о vanilla JS, вы можете найти первый радиовход, используя querySelector. Например:

var Form = React.createClass({
    componentDidMount: function(){
        this.getDOMNode().querySelector('[type="radio"]').checked = "checked";
    },
    render: function(){
        //your render here
    }
});

Если вы используете jQuery, это можно сделать следующим образом:

...
    $(this.getDOMNode()).find('[type="radio"]').eq(0).prop("checked", true);
...

Ответ 3

У меня была аналогичная проблема.

Используйте defaultChecked prop для (и только для) первого рендеринга и дайте функции onChange для обработки изменений значений.

Я нашел очень хороший пример для разных типов input здесь: http://bl.ocks.org/insin/raw/082c0d88f6290a0ea4c7/

Ответ 4

Используйте defaultChecked следующим образом:

<input type="radio" name="temperature" value="hot" defaultChecked={true}/> Hot
<input type="radio" name="temperature" value="warm" /> Warm