如何在 ReactJs 中使用 RadioButton 设置状态

Question

I was trying to setState using the radiobuttons in ReactJs but I dont know why this is not working, maybe I have something missing in my code

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

This is my Function "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  

and that's my code for buttons.. I was trying to call the function on radio button click and then according to that I was trying to set the value of state but this code is not working to setState in my project What's Wrong in this code ? my state name is views initialized as an empty string....

Answer 1

I think you should use OnChange instead the OnClick prop

change onClick={handleRadio} to OnChange={handleRadio}

Answer 2

Here is a complete example

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'));