如何在React中设置单选按钮的默认选中状态？

Question

我创建了一个包含三个单选按钮的选项卡：

我想让青柠色作为默认选中的单选按钮，我将青柠色设置为默认值，但它并没有起作用。

这是我的代码，我不知道该如何解决我的问题。

    import React, {Component} from 'react';

    class App extends Component{
      constructor(props){
        super(props)

        this.handleflavorSubmit = this.handleflavorSubmit.bind(this)
        this.onChangeRadio = this.onChangeRadio.bind(this)


        this.state = {value : 'lime'};
        }

      onChangeRadio(e){
        this.setState({value : e.target.value})
      }

      handleflavorSubmit(e){
        alert("your favorite flavor is " + this.state.value)
        e.preventDefault();
      }

      render(){

        return( 
          <div>
            <h1>Choose your flavor:</h1>
            <form onSubmit = {this.handleflavorSubmit}>
              <input type="radio" checked = {this.state.value === 'grapefruit'} onChange = {this.onChangeRadio} value= "grapefruit"/>Grapefruit
              <input type = "radio" checked = {this.state.value === 'lime'} onChange = {this.onChangeRadio} value = "lime"/>Lime
              <input type = "radio" checked = {this.state.value === 'orange'} onChange = {this.onChangeRadio} value = "orange"/>Orange
              <input type = "submit" value = "submit"/>
            </form>

          </div>
        )
      }
    }

export default App

- mehrab habibi

Answer 1

您的代码实际上是有效的。您只需要在return后面包含括号。

在CodeSandbox中尝试它。这是可行的代码：https://codesandbox.io/s/red-rain-r81n4

import React,{Component} from "react";
import ReactDOM from "react-dom";


import "./styles.css";

class App extends Component{
  constructor(){
    super()

    this.handleflavorSubmit = this.handleflavorSubmit.bind(this)
    this.onChangeRadio = this.onChangeRadio.bind(this)


    this.state = {value : 'lime'};
    }

  onChangeRadio(e){
    this.setState({value : e.target.value})
  }

  handleflavorSubmit(e){
    alert("your favorite flavor is " + this.state.value)
    e.preventDefault();
  }

  render(){

    return (
      <div>
        <h1>Choose your flavor:</h1>
        <form onSubmit = {this.handleflavorSubmit}>
          <input type="radio" checked = {this.state.value === 'grapefruit'} onChange = {this.onChangeRadio} value= "grapefruit"/>Grapefruit
          <input type = "radio" checked = {this.state.value === 'lime'} onChange = {this.onChangeRadio} value = "lime"/>Lime
          <input type = "radio" checked = {this.state.value === 'orange'} onChange = {this.onChangeRadio} value = "orange"/>Orange
          <input type = "submit" value = "submit"/>
        </form>
      </div>
    );
}
}
const rootElement = document.getElementById("root");
ReactDOM.render(<App/>, rootElement);

- Ram Sankhavaram

Answer 2

为想要在第一次加载时设置为选中的单选按钮添加defaultChecked属性。将其置为true即可。原始答案应翻译为"默认选中"。

<input type = "radio" defaultChecked checked = {this.state.value === 'lime'} onChange = {this.onChangeRadio} value = "lime"/>Lime

- Sultan H.

---

我添加了 defaultChecked 但仍然无法运行。无论如何，谢谢，我之前不知道这个。 - mehrab habibi

我已经测试了你分享的示例代码，它可以正常工作，请查看。 - Sultan H.

我遇到了类似的问题，经过数小时的尝试和错误，我只需要将我的代码从defaultChecked={value === 'string'}更改为defaultChecked={value === 'string' ? "true" : "false"}即可。 - Siklab.ph