React.js - 如何设置选中的单选按钮并追踪onChange事件？

Question

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

我尝试按照React表单中选择框的设置方式进行设置，但似乎对于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>

- user3386414

---

我不确定我有一个很好的答案来回答你的问题，但是我想留言让你知道将初始状态作为 prop 传递通常并不是个好主意：在这里查看更多细节。你可能想要在 componentDidMount() 中设置初始状态信息。希望对你有所帮助！ - yoursweater

Answer 1

这里是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>)
    }

}

- Gerard Banasig

Answer 2

对于使用 UseState Hooks 的人来说，你可以简单地这样做：

    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>
    }

- robbertou

Answer 3

似乎在多个同名不受控制的单选按钮上设置defaultChecked并不能如你所期望的那样工作，而且由于某种原因，onChange每个不受控制的单选按钮只会触发一次（使用react@15.6.1），因此您可能需要通过设置checked来切换到受控制的输入。

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>
  }
}

• 现场版本

- Jonny Buchanan

---

你好 Jonny，我遇到了一个语法错误：在 state = { reportWeekday: 'monday' } 上出现了意外的标记。我猜测你启用了类属性，但这还不是规范的一部分。 - Gerard Banasig

你需要使用babel-preset-stage-2预设或者babel-plugin-transform-class-properties插件（预设包含了该插件）来启用这种语法。 - Jonny Buchanan