Javascript 反应：通过单击按钮取消选择所有单选按钮

我有一个组件可以渲染三个自定义单选按钮。用户可以提交所选内容，也可以清除（取消选择）所选内容，不保留所选单选按钮

我尝试了一些选项，将

filterResult

与

data.value

进行比较，但没有成功。下面是一个简化的代码：

// 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>
    )
  }
}

---

编辑：本机无线电输入上的单击事件工作正常，因此无需将其更改为自定义无线电（

span

元素）或标签上的事件。

您应该从具有存储当前选定无线电的状态变量开始。如果您不希望预先选择任何值，则此值的初始值应为

null

（或其他一些falsy值）

重置按钮应触发将该状态变量重置回初始值的功能

---

按照您的要求，使用自定义css单选按钮查看此简单演示：

MyApp类扩展了React.Component{ 构造函数（）{ 超级（）； 此.state={ selectedRadio:null， 产品：[{id:1，名称：“foo”}，{id:2，名称：“bar”}，{id:3，名称：“baz”}] } } 选择=（id）=>{ this.setState（{selectedRadio:id}）； } 重置=（）=>{ this.setState（{selectedRadio:null}）； } render（）{ 返回( {this.state.products.map( （项目）=>{ 返回( {item.name} ); } )} 重置 ); } } ReactDOM.render（，document.getElementById（“app”）

div{
利润率：10px0；
}
输入[type=“radio”]{
显示：无；
}
输入[type=“radio”]+标签范围{
显示：内联块；
宽度：14px；
高度：14px；
左边距：4倍；
垂直对齐：中间对齐；
光标：指针；
边界半径：34%；
}
输入[type=“radio”]+标签范围{
背景色：#333；
}
输入[类型=”收音机“]：已选中+标签span{
背景颜色：橙色；
}

---

您应该从一个状态变量开始，该变量存储当前选择的收音机。如果您不希望预先选择任何值，则此值的初始值应为

null

（或其他一些falsy值）

重置按钮应触发将该状态变量重置回初始值的功能

---

按照您的要求，使用自定义css单选按钮查看此简单演示：

MyApp类扩展了React.Component{ 构造函数（）{ 超级（）； 此.state={ selectedRadio:null， 产品：[{id:1，名称：“foo”}，{id:2，名称：“bar”}，{id:3，名称：“baz”}] } } select=（id）=>{ this.setState（{selectedRadio:id}）； } 重置=（）=>{ this.setState（{selectedRadio:null}）； } render（）{ 返回( {this.state.products.map( （项目）=>{ 返回( {item.name} ); } )} 重置 ); } } ReactDOM.render（，document.getElementById（“app”）

div{
利润率：10px0；
}
输入[type=“radio”]{
显示：无；
}
输入[type=“radio”]+标签范围{
显示：内联块；
宽度：14px；
高度：14px；
左边距：4倍；
垂直对齐：中间对齐；
光标：指针；
边界半径：34%；
}
输入[type=“radio”]+标签范围{
背景色：#333；
}
输入[type=“radio”]：选中+标签范围{
背景颜色：橙色；
}

---

这个例子可以帮助您

代码：

class无线电组件{
建造师（道具）{
超级（道具）；
this.state={selected:false}；
}
切换（）{
const{onChange}=this.context.radioGroup；
const selected=！this.state.selected；
this.setState（{selected}）；
onChange（选中，此项）；
}
已选（已选）{
this.setState（{selected}）；
}
render（）{
让classname=this.state.selected？“活动”：”
返回(
{this.state.selected？'yes'：'no'}
);
}
}
Radio.contextTypes={
放射组：React.PropTypes.object
};
类RadioGroup扩展了React.Component{
建造师（道具）{
超级（道具）；
this.options=[]；
}
getChildContext（）{
const{name}=this.props；
返回{radioGroup:{
名称
onChange:this.onChange.bind（this）
}};
}
onChange（已选择，子项）{
this.options.forEach（option=>{
如果（选项！==子项）{
option.setSelected（！selected）；
}
});
}
render（）{
让children=React.children.map（this.props.children，child=>{
返回React.cloneElement（子级{
ref：（组件=>{this.options.push（组件）；}）
});
});
返回{children}；
}
}
RadioGroup.childContextTypes={
放射组：React.PropTypes.object
};
类应用程序扩展了React.Component{
render（）{
返回(
);
}
}
/*
*将上述组件渲染到div#应用程序中
*/
ReactDOM.render（，document.getElementById（'app'））；

这个例子可以帮助您

代码：

class无线电组件{
建造师（道具）{
超级（道具）；
this.state={selected:false}；
}
切换（）{
const{onChange}=this.context.radioGroup；
const selected=！this.state.selected；
this.setState（{selected}）；
onChange（选中，此项）；
}
已选（已选）{
this.setState（{selected}）；
}
render（）{
让classname=this.state.selected？“活动”：”
返回(
{this.state.selected？'yes'：'no'}
);
}
}
Radio.contextTypes={
放射组：React.PropTypes.object
};
类RadioGroup扩展了React.Component{
建造师（道具）{
超级（道具）；
this.options=[]；
}
getChildContext（）{
const{name}=this.props；
返回{radioGroup:{
名称
onChange:thi
const filters = [
  {
    data: [{
      label: 'Label 1',
      value: 1
    }, {
      label: 'Label 2',
      value: 2
    }, {
      label: 'Label 3',
      value: 3
    }],
    name: 'userFilter'
  }
]

class Radio extends React.Component {
  constructor(props) {
    super(props);
    this.state = {selected: false};
  }

  toggle() {
    const {onChange} = this.context.radioGroup;
    const selected = !this.state.selected;
    this.setState({selected});
    onChange(selected, this);
  }

  setSelected(selected) {
    this.setState({selected});
  }

  render() {
    let classname = this.state.selected ? 'active' : ''
    return (
      <button type="button" className={classname} onClick={this.toggle.bind(this)}>
        {this.state.selected ? 'yes' : 'no'}
      </button>
    );
  }
}

Radio.contextTypes = {
  radioGroup: React.PropTypes.object
};

class RadioGroup extends React.Component {
  constructor(props) {
    super(props);
    this.options = [];
  }

  getChildContext() {
    const {name} = this.props;
    return {radioGroup: {
      name,
      onChange: this.onChange.bind(this)
    }};
  }

  onChange(selected, child) {
    this.options.forEach(option => {
      if (option !== child) {
        option.setSelected(!selected);
      }
    });
  }

  render() {
    let children = React.Children.map(this.props.children, child => {
      return React.cloneElement(child, {
        ref: (component => {this.options.push(component);}) 
      });
    });
    return <div className="radio-group">{children}</div>;
  }
}

RadioGroup.childContextTypes = {
  radioGroup: React.PropTypes.object
};

class Application extends React.Component {
  render() {
    return (
      <RadioGroup name="test">
        <Radio value="1" />
        <Radio value="2" />
        <Radio value="3" />
      </RadioGroup>
    );
  }
}

/*
 * Render the above component into the div#app
 */
ReactDOM.render(<Application />, document.getElementById('app'));