CODEWITHSUNDEEP
javascripthtmlradio-buttonreactjs
Alexander Suraphel
Alexander Suraphel

Reputation: 10613

HTML + React: Radio button stuck on the one initially set as "checked"

I have a set of two radio buttons one of which is checked when the page is loaded. It appears that I can't change it to the second one. The HTML is build by reactjs if that matters. The markup on chrome looks like: 

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

Upvotes: 14

Views: 21365

Answers (4)

Ricky Sahu
Ricky Sahu

Reputation: 24329

Use defaultChecked like so:

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

Upvotes: 4

Yu J.
Yu J.

Reputation: 63

I used to have similar problem.

Use defaultChecked prop for (and only for) first render, and give an onChange function to handle value changes.

I found a very good example for different input types here: http://bl.ocks.org/insin/raw/082c0d88f6290a0ea4c7/

Upvotes: 5

skip405
skip405

Reputation: 6279

update "the react way" of doing that is to add the defaultChecked={true} to the needed input. Other ways are listed below.

I actually faced the same situation. What I did was to find the input tag in the componentDidMount lifecycle method of the parent React component and set the checked attribute then.

If we speak about vanilla JS you can find the first radio input using querySelector. Like so:

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

If you use jQuery, this can be done like this:

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

Upvotes: 18

Alexander Suraphel
Alexander Suraphel

Reputation: 10613

The reason for this was that React was making the inputs controlled components because the values for each input are set from the server side.

Quoting from Brandon's answer:

If you add a value={whatever} property to the input, which makes it a controlled component, then it is read-only uness you add an onChange handler that updates the value of whatever. From the React docs:

Why Controlled Components?

Using form components such as <input> in React presents a challenge that is absent when writing traditional form HTML. For example, in HTML:

<input type="text" name="title" value="Untitled" />

This renders an input initialized with the value, Untitled. When the user updates the input, the node's value property will change. However, node.getAttribute('value') will still return the value used at initialization time, Untitled.

Unlike HTML, React components must represent the state of the view at any point in time and not only at initialization time. For example, in React:

render: function() {
  return <input type="text" name="title" value="Untitled" />;
}

Since this method describes the view at any point in time, the value of the text input should always be Untitled.

The simplest solution I found is to add onChange={function(){}} to the inputs.

Upvotes: 4

Related Questions