反应函数加载无线电组的初始值并选择它

Question

我在设置无线电组的初始值（从传递给函数的值）时遇到问题，如下所示：

export default function SportTeamRanking({team, ...props}) {

所以现在我有一个带有 4 个单选按钮的单选组，我想要预先选择或检查的值包含在上面指定的 team 对象中（类似于 team.ranking）。这个值是从一个类组件传递到这个函数中的。因此，假设团队对象的 team.ranking 值为“rank2”，因此理想情况下，在函数加载时会预先选择 Rank 2 单选按钮。

我有一个初始状态：

const [value, setValue] = React.useState("");

我尝试设置React.useState(team.ranking)，但仍然没有选择任何按钮。

我也尝试过使用 useEffect 并且只运行一次：

useEffect(() => {
    setValue(team.ranking)
  }, []);

但没有运气。我很早就尝试过控制台日志记录，但似乎 team 对象仍然是空的，而所有这些代码都已执行？

此函数的目标是预加载之前可能已设置的任何已保存值（从传入的团队对象），然后在需要时更新为新的排名值并保存。

更多信息，这里是返回正文中的无线电组代码：

<FormControl component="fieldset">
  <FormLabel component="legend">Team Ranking</FormLabel>
  <RadioGroup aria-label="ranking" name="ranking1" value={value} onChange={handleChange}>
    <FormControlLabel value="rank1" control={<Radio />} label="Rank 1" />
    <FormControlLabel value="rank2" control={<Radio />} label="Rank 2" />
    <FormControlLabel value="rank3" control={<Radio />} label="Rank 3" />
    <FormControlLabel value="rank4" control={<Radio />} label="Rank 4" />
  </RadioGroup>
</FormControl>

而 onChange 很简单：

const handleChange = (event) => {
    setValue(event.target.value);
  };

任何建议都非常感谢，谢谢！

Answer 1

正如您提到的，值是从类组件传递到函数组件的，看看下面的代码是否回答了您的问题。

function FormControlLabelPosition(props) {

  const onChange = (e) => props.onChange(e.target.value)

  return (
    <FormControl component="fieldset">
      <FormLabel component="legend">Team Ranking</FormLabel>
      <RadioGroup aria-label="ranking" name="ranking1" value={props.value} onChange={onChange}>
        <FormControlLabel value="rank1" control={<Radio />} label="Rank 1" />
        <FormControlLabel value="rank2" control={<Radio />} label="Rank 2" />
        <FormControlLabel value="rank3" control={<Radio />} label="Rank 3" />
        <FormControlLabel value="rank4" control={<Radio />} label="Rank 4" />
      </RadioGroup>
    </FormControl>
  );
}

export default class Parent extends React.Component {
  state = {
    value: "rank4"
  }

  handleChange = (val:string) => this.setState({value: val})

  render() {
    return (<FormControlLabelPosition value={this.state.value} onChange={this.handleChange}/>)
  }
}

在这里试试：https://codesandbox.io/s/material-demo-4ilxb