javascript - React: Unselect all radio buttons via button click -

i have component renders 3 custom radio buttons. user can either submit selected or clear (unselect) them, leaving no selected radio buttons.

i tried options comparing filterresult data.value, without success. here's simplified code:

// imports ...  type props = {   filterconfig: proptypes.object,   filtervalue: proptypes.string,   onfilterchange: proptypes.func }  class filter extends react.component {   this.props = props   this.state = {     filtervalue: this.props.filtervalue,   }    handlechange = (e) => {     this.setstate({ filtervalue: e.target.value })   }    handlesubmit = () => {     this.props.onfilterchange(this.state.filtervalue)     this.refs.filtercontainer.close()   }    handleclear = () => {     this.setstate({ filtervalue: '' })   }    renderoptions = () => {     const { data, name } = this.props.filterconfig     const options = data.map(       (o, i) => (         <div classname='custom-radio' key={i}>           <input             id={`${name}-${i}`}             name={name}             onchange={this.handlechange}             type='radio'             value={o.value}           />           <label htmlfor={`${name}-${i}`}>             <span />             {o.label}           </label>         </div>       )     )      return (       <div>         {options}       </div>     )   }    renderpickernavigation = () => {     return (       <div>         <a           href='javascript:void(0)'           onclick={this.handleclear}         >           clear         </a>         <a           href='javascript:void(0)'           onclick={this.handlesubmit}         >           done         </a>       </div>     )   }    render = () => {     return (       <filterwrapper         ref='filterwrapper'       >         {this.renderoptions()}         {this.renderpickernavigation()}       </filterwrapper>     )   } } 

the data i'm passing in is:

const filters = [   {     data: [{       label: 'label 1',       value: 1     }, {       label: 'label 2',       value: 2     }, {       label: 'label 3',       value: 3     }],     name: 'userfilter'   } ] 

edit: click event on native radio input works fine, no need change on custom radio (the span element) or label.

you should begin having state variable stores radio selected. initial value should null (or other falsy value) if want none pre-selected.

the reset button should trigger function resets state variable initial value.

---

take @ simple demo, using custom css radio buttons requested:

class myapp extends react.component {    constructor() {      super();      this.state = {        selectedradio: null,        products: [{id: 1, name: "foo"}, {id: 2, name: "bar"}, {id: 3, name: "baz"}]      }    }        select = (id) => {      this.setstate({selectedradio: id});    }        reset = () => {      this.setstate({selectedradio: null});    }        render() {      return (        <div>          {this.state.products.map(            (item) => {              return (                <div key={item.id}>                  <input type="radio" name="myradio" checked={this.state.selectedradio === item.id} />                  <label onclick={this.select.bind(this, item.id)}>{item.name}<span /></label>                </div>              );            }          )}          <button onclick={this.reset}>reset</button>        </div>      );    }  }    reactdom.render(<myapp />, document.getelementbyid("app"));

div {    margin: 10px 0;  }    input[type="radio"] {    display: none;  }    input[type="radio"]+label span {    display: inline-block;    width: 14px;    height: 14px;    margin-left: 4px;    vertical-align: middle;    cursor: pointer;    border-radius: 34%;  }    input[type="radio"]+label span {    background-color: #333;  }    input[type="radio"]:checked+label span {    background-color: orange;  }

<script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.1.0/react.min.js"></script>  <script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.1.0/react-dom.min.js"></script>  <div id="app"></div>

note: since hiding input element css, cannot have listeners on (e.g onchange or onclick). instead, should have onclick on span replaces (see code below).

---

for solution of how reset "traditional", non-css-only radio buttons, see snippet below:

class myapp extends react.component {    constructor() {      super();      this.state = {        selectedradio: null,        products: [{id: 1, name: "foo"}, {id: 2, name: "bar"}, {id: 3, name: "baz"}]      }    }        select = (id) => {      this.setstate({selectedradio: id});    }        reset = () => {      this.setstate({selectedradio: null});    }        render() {      return (        <div>          {this.state.products.map(            (item) => {              return (                <div key={item.id}>                  <label>{item.name}</label>                  <input type="radio" name="myradio" onchange={this.select.bind(this, item.id)} checked={this.state.selectedradio === item.id} />                </div>              );            }          )}          <button onclick={this.reset}>reset</button>        </div>      );    }  }    reactdom.render(<myapp />, document.getelementbyid("app"));

<script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.1.0/react.min.js"></script>  <script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.1.0/react-dom.min.js"></script>  <div id="app"></div>