时间戳

首页 > 解决方案 > 是否可以取消选择通过单击选定的一个（在 React 中）？

javascript - 是否可以取消选择通过单击选定的一个（在 React 中）？

问题描述

是否可以通过单击选定的收音机来取消选择收音机？

我知道这是默认浏览器行为，但我一直在研究这个自定义功能。

Material-ui也不能这样做。

我知道Material-ui包裹<input type="radio">在里面<label />，它看起来像这样：

<label>
  <input type="radio" onChange={() => {}}>
</label>

如果我想实现这个功能，我将不得不替换onChangeinto onClick，但是浏览器会对我大喊大叫，<input />应该有onChange事件处理程序。

那么我如何正确地onChange与onClick事件处理程序挂钩呢？

我应该给onChange事件一个空函数吗？还是我应该打电话preventDefault？

标签： javascripthtmlreactjsformsinput

解决方案

看看这个网址

import React, { Component } from 'react';
import { render } from 'react-dom';
import Hello from './Hello';
import './style.css';

class App extends Component {
  constructor() {
    super();
    this.state = {
      group1:[{"value":"1"},
      {"value":"2"},
      {"value":"3"}],
      group1Selected:null,
      group2:[{"value":"1"},
      {"value":"2"},
      {"value":"3"}],
       group2Selected:null,
    };
  }
  ChangeOption = (i,group) =>{
    var groupData = this.state[group] == i?null:i;        
    this.setState({[group]:groupData})
  }
  render() {
    const {group1,group2,group1Selected,group2Selected} = this.state;
    return (
      <div>
        {
          group1.map( (data,i)=><><input type="radio" id={`1-${i}`} onClick={e=>this.ChangeOption(i,"group1Selected")} checked={i==group1Selected?true:false} name="1" value={data.value}/><label for={`1-${i}`}>{data.value}</label></>)
        }
        <br/>
        {
          group2.map( (data,i)=><><input id={`2-${i}`} onClick={e=>this.ChangeOption(i,"group2Selected")} type="radio" checked={i==group2Selected?true:false} name="2" value={data.value}/><label for={`2-${i}`}>{data.value}</label></>)
        }
      </div>
    );
  }
}

render(<App />, document.getElementById('root'));

推荐阅读