Question

我想要一个单选按钮列表，其中一个选项是自由样式的“其他”文本框，允许用户输入自己的文本。

在这里，我有一个想做的所有工作的沙箱：

handleChange = event => {
    this.setState({
      value: event.target.value
    });
  };

  selectItem = item => {
    this.setState({
      selectedItem: item
    });
  };

  handleOtherChange = event => {
    this.setState({
      otherText: event.target.value
    });

    this.selectItem(
      //Todo put in right format
      this.state.otherText
    );
  };
  focusOther = () => {
    this.setState({
      value: "Other"
    });

    this.selectItem(this.state.otherText);
  };

  render() {
    const { classes, items } = this.props;
    const { value } = this.state;

    return (
      <div className={classes.root}>
        <Typography>
          {" "}
          Selected item is: {JSON.stringify(this.state.selectedItem)}
        </Typography>

        <FormControl component="fieldset" fullWidth>
          <RadioGroup value={this.state.value} onChange={this.handleChange}>
            {items.map(v => (
              <FormControlLabel
                value={v.name}
                control={<Radio />}
                label={v.name}
                key={v.name}
                onChange={() => this.selectItem(v)}
              />
            ))}

            <FormControlLabel
              value="Other"
              control={<Radio />}
              label={
                <TextField
                  placeholder="other"
                  onChange={this.handleOtherChange}
                  onFocus={this.focusOther}
                />
              }
              onChange={() => this.selectItem(this.state.otherText)}
            />
          </RadioGroup>
        </FormControl>
      </div>
    );
  }
}

现在我要做的是将“其他”文本框设置为其自己的组件。

这是我的尝试：

https://codesandbox.io/s/ryomnpw1o

export default class OtherRadioButton extends React.Component {
  constructor() {
    super();

    this.state = {
      text: null
    };
  }

  handleTextChange = event => {
    this.setState({
      text: event.target.value
    });
    this.props.onChange(this.state.text);
  };
  focusOther = () => {
    this.props.onFocus(this.props.value);
    this.props.onChange(this.state.text);
  };

  render() {
    return (
      <FormControlLabel
        value={this.props.value}
        control={<Radio />}
        label={
          <TextField
            placeholder="other"
            onChange={this.handleTextChange}
            onFocus={this.focusOther}
          />
        }
        onChange={this.focusOther}
      />
    );
  }
}

用于：

   <OtherRadioButton
      value="Other"
      onFocus={v => this.setState({ value: v})}
      onChange={v => this.selectItem(v)}
    />

如您所见-自由文本的值正在向后传播-但RadioGroup似乎不知道FormGroupLabel的值。

这是为什么，我将如何解决？

Answer 1

您可以检查RadioGroup源代码here。而且我已经编写了自己的代码，以更好地说明如何对其进行修复。看到这里：https://codesandbox.io/s/mz1wn4n33j

RadioGroup为其FormControlLabel / RadioButton子代创建一些道具。通过在其他组件中创建自己的自定义单选按钮，这些道具不会传递到FormControlLabel / RadioButton。

您可以通过将道具传递到自定义RadioButton中的FormControlLabel来解决这些问题。

    public async Task UploadDoc()
    {
        using (var dbx = new DropboxClient("my_access_token"))
        {
            using (var fileStream = File.Open(@"C:\temp\50203.txt", FileMode.Open))
            {
                await dbx.Files.UploadAsync("/50203.txt", body: fileStream);
            }
        }
    }

将自定义单选按钮组件放在Material UI中的单选组中

1 个答案: