如何设置单选按钮默认签入反应？

Posted 2023-02-21

【中文标题】如何设置单选按钮默认签入反应？

【英文标题】：How to Set radio button default checked in react?

【发布时间】：2019-11-23 13:54:30

【问题描述】：

我创建了带有 3 个单选按钮的单选按钮： 我想将石灰作为默认选中单选按钮，我将石灰设置为默认值但它不起作用。

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

    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

【参考方案1】：

您的代码实际上正在运行。您只需要在返回后包含括号即可。

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

【参考方案2】：

为您要设置为选中的input 无线电添加defaultChecked 属性，使其在第一次装载时处于选中状态。

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

【讨论】：

我添加了 defaultChecked 但仍然不起作用。无论如何谢谢你，我不知道。

我已经测试了你分享的示例代码，它工作正常，checkout

我遇到了类似的问题，经过数小时的反复试验，我只需将我的代码从 defaultChecked=value === 'string' 更改为 defaultChecked=value === 'string' ? "true" : "false"