如何在 ReactJs 中使用 RadioButton 設置狀態

Question

我試圖在 ReactJs 中使用單選按鈕設置狀態，但我不知道為什么這不起作用，也許我的代碼中缺少一些東西

  var handleRadio = (event)=>{
      this.setState({views:event.target.value})
     
    }
    

這是我的函數“handleRadio”

 <input
                    type="radio"
                    checked={this.state.views === "streets-v11"}
                    onClick={handleRadio} 
                    value="streets-v11"
                /> Street Map <br />
                <input
                    type="radio"
                    checked={this.state.views === 'outdoors-v11'}
                    onClick={handleRadio} 
                    value="outdoors-v11"
                /> Topo Map <br />
                    <input
                    type="radio"
                    checked={this.state.views === 'satellite-v9'}
                    onClick={handleRadio} 
                    value="satellite-v9"
                /> Satellite Map  

這是我的按鈕代碼.. 我試圖在單選按鈕單擊時調用該函數，然后根據該函數我試圖設置 state 的值，但是這段代碼在我的項目中無法用於 setState 這段代碼有什么問題？ 我的狀態名稱是初始化為空字符串的視圖....

Answer 1

我認為你應該使用 OnChange 而不是 OnClick 道具

將onClick={handleRadio}更改為OnChange={handleRadio}

Answer 2

這是一個完整的例子

class App extends React.Component {
  constructor(props) {
    super(props);
    this.state = {
      views: [
        { txt: 'streets-v11', value: false },
        { txt: 'outdoors-v11', value: true },
        { txt: 'satellite-v9', value: true }
      ]
    };
    this.handleRadio = this.handleRadio.bind(this);
  }

  handleRadio(e) {
    let views = this.state.views.slice(0);
    views = views.map((v) => {
      if (v.txt === e.target.name) v.value = !v.value;
      return v;
    });
    this.setState({ ...this.state, views });
  }

  render() {
    return (
      <h1>
        {this.state.views.map((v) => {
          return (
            <div key={v.txt}>
              <input
                name={v.txt}
                type="radio"
                checked={v.value}
                onClick={this.handleRadio}
              />
              {v.txt}
            </div>
          );
        })}
      </h1>
    );
  }
}

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