React.js - 如何设置选中/选中的单选按钮并跟踪 onChange？

Posted 2023-02-22

【中文标题】React.js - 如何设置选中/选中的单选按钮并跟踪 onChange？

【英文标题】：React.js - How do I set a checked/selected radio button and track the onChange?

【发布时间】：2017-11-18 13:09:00

【问题描述】：

我在一个组件中有一个星期几的广播组。如果用户已经有一天与他们的帐户相关联，我希望它成为选中/选中的单选按钮。因此，如果他们以前保存过“星期一”，我将从父级获取并将其存储在状态中，并希望在页面呈现时选择它。

我试图将其设置为类似于在 React Forms 中进行选择的方式，但它似乎不适用于 Fieldset。有什么想法吗？

constructor(props) 
  super(props);
  this.state = 
    reportWeekday: "monday"
  


  handleWeekdayChange(event)
    this.setState(reportWeekday: event.target.value);
    console.log(event.target.value);
  

  <fieldset className="schedule-weekday" value=this.state.reportWeekday onChange=this.handleWeekdayChange>
    <label for="sunday"><input type="radio" name="schedule-weekly-option" value="sunday" id="sunday" />Sunday</label>
    <label for="monday"><input type="radio" name="schedule-weekly-option" value="monday" id="monday" />Monday</label>
    <label for="tuesday"><input type="radio" name="schedule-weekly-option" value="tuesday" id="tuesday" />Tuesday</label>
    <label for="wednesday"><input type="radio" name="schedule-weekly-option" value="wednesday" id="wednesday" />Wednesday</label>
    <label for="thursday"><input type="radio" name="schedule-weekly-option" value="thursday" id="thursday" />Thursday</label>
    <label for="friday"><input type="radio" name="schedule-weekly-option" value="friday" id="friday" />Friday</label>
    <label for="saturday"><input type="radio" name="schedule-weekly-option" value="saturday" id="saturday" />Saturday</label>
  </fieldset>

【问题讨论】：

我不确定我是否对您的问题有一个很好的答案，但我确实想发表评论让您知道将初始状态作为道具传递通常不是一个好主意：@ 987654321@。您可能希望在 componentDidMount() 中设置初始状态信息。希望有帮助！

【参考方案1】：

对于那些使用 UseState 钩子的人，您可以这样做：

    import React,  useState  from 'react';
    
    
    export default function ControlledRadios() 
    const [weekday,setWeekday] = useState("monday")
    
    function handleWeekdayChange(event) 
    setWeekday(event.target.value)
    
    
    return 
    <fieldset className="schedule-weekday" value=weekday onChange=(event) => handleWeekdayChange(event)>
        <label for="sunday"><input type="radio" name="schedule-weekly-option" value="sunday" id="sunday" />Sunday</label>
        <label for="monday"><input type="radio" name="schedule-weekly-option" value="monday" id="monday" />Monday</label>
        <label for="tuesday"><input type="radio" name="schedule-weekly-option" value="tuesday" id="tuesday" />Tuesday</label>
        <label for="wednesday"><input type="radio" name="schedule-weekly-option" value="wednesday" id="wednesday" />Wednesday</label>
        <label for="thursday"><input type="radio" name="schedule-weekly-option" value="thursday" id="thursday" />Thursday</label>
        <label for="friday"><input type="radio" name="schedule-weekly-option" value="friday" id="friday" />Friday</label>
        <label for="saturday"><input type="radio" name="schedule-weekly-option" value="saturday" id="saturday" />Saturday</label>
      </fieldset>
    

【参考方案2】：

这是 Jonny 没有启用类属性的解决方案。

class ControlledRadios extends React.Component
  constructor()
    super()
    this.state = 
      reportWeekday: 'monday'
    
  

  handleWeekdayChange(event) 
    this.setState(reportWeekday: event.target.value)    
  

  render() 
    let reportWeekday = this.state
    return (<fieldset onChange=this.handleWeekdayChange.bind(this)>
      <label><input type="radio" name="schedule-weekly-option" value="sunday" checked=reportWeekday === 'sunday'/>Sunday</label>
      <label><input type="radio" name="schedule-weekly-option" value="monday" checked=reportWeekday === 'monday'/>Monday</label>
      <label><input type="radio" name="schedule-weekly-option" value="tuesday" checked=reportWeekday === 'tuesday'/>Tuesday</label>
      <label><input type="radio" name="schedule-weekly-option" value="wednesday" checked=reportWeekday === 'wednesday'/>Wednesday</label>
      <label><input type="radio" name="schedule-weekly-option" value="thursday" checked=reportWeekday === 'thursday'/>Thursday</label>
      <label><input type="radio" name="schedule-weekly-option" value="friday" checked=reportWeekday === 'friday'/>Friday</label>
      <label><input type="radio" name="schedule-weekly-option" value="saturday" checked=reportWeekday === 'saturday'/>Saturday</label>
    </fieldset>)
    

【讨论】：

优秀..谢谢你...

【参考方案3】：

似乎在多个同名的uncontrolled 单选按钮上设置defaultChecked 并不能像您期望的那样工作，并且由于某种原因onChange 仅在每个不受控制的单选按钮上触发一次（使用 react@15.6.1 )，因此您可能必须通过设置 checked 来切换到 controlled 输入。

class ControlledRadios extends React.Component 
  state = 
    reportWeekday: 'monday'
  

  handleWeekdayChange = (event) => 
    this.setState(reportWeekday: event.target.value)
  

  render() 
    let reportWeekday = this.state
    return <fieldset onChange=this.handleWeekdayChange>
      <label><input type="radio" name="schedule-weekly-option" value="sunday" checked=reportWeekday === 'sunday'/>Sunday</label>
      <label><input type="radio" name="schedule-weekly-option" value="monday" checked=reportWeekday === 'monday'/>Monday</label>
      <label><input type="radio" name="schedule-weekly-option" value="tuesday" checked=reportWeekday === 'tuesday'/>Tuesday</label>
      <label><input type="radio" name="schedule-weekly-option" value="wednesday" checked=reportWeekday === 'wednesday'/>Wednesday</label>
      <label><input type="radio" name="schedule-weekly-option" value="thursday" checked=reportWeekday === 'thursday'/>Thursday</label>
      <label><input type="radio" name="schedule-weekly-option" value="friday" checked=reportWeekday === 'friday'/>Friday</label>
      <label><input type="radio" name="schedule-weekly-option" value="saturday" checked=reportWeekday === 'saturday'/>Saturday</label>
    </fieldset>
  

Live version

【讨论】：

您好 Jonny，我收到语法错误：state = reportWeekday: 'monday' 上的意外标记，我猜您启用了尚未包含在规范中的类属性。

您需要使用babel-preset-stage-2 预设或babel-plugin-transform-class-properties 插件（预设包括）来启用此语法。