Question

这是我的问题，当我选择其他单选按钮时，它显示输入文本，但无法编辑该文本。这意味着固定的“其他”字词无法编辑。如何制作可编辑的文字？这是我的代码

  <RadioGroup onChange={this.onChangeRedio} value={this.state.value}>
              <Radio  value="Father">Father</Radio>
              <Radio value="Mother">Mother </Radio>
              <Radio   value="Husband ">Husband </Radio>
              <Radio  value="Wife">Wife </Radio>
              <Radio value="Brother">Brother </Radio>
              <Radio  value="Sister">Sister </Radio>

              <Radio  value="other"> Other
        {this.state.value === "other" ? <Input value={this.state.value}  style={{ width: 100, marginLeft: 10 }} placeholder="Other" type="text" /> : null}
              </Radio>
</RadioGroup>

这是我的js代码：

onChangeRedio = (e) => {
  console.log('radio checked', e.target.value);
  this.setState({
     value: e.target.value,
  });
}

Answer 1

问题在于您输入的是uncontrolled input。

您正在提供一个value属性，但忽略了提供一个onChange处理程序，该处理程序将使用输入的值更新value状态。这就是使其成为“不受控制的输入”的原因。

解决方案是简单地添加一个onChange处理程序，该处理程序将更新您的value状态。

例如，

<Input type="text"
  value={this.state.value}
  onChange={this.handleOtherChange}
/>

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

存在另一个问题，因为当value状态属性等于'other'时，当前逻辑仅显示输入字段。这是有问题的，因为一旦您在输入中输入内容，它就会消失。

作为解决方案，让我们提出一个更聪明的条件，说“如果value state属性不是我们的预设之一，或者它是“ other”，则显示输入。

我建议将您的电台预设移动到一个数组中，然后使用该数组渲染Radio分量；那么您可以编写一个说if state value is not in radio array, return true; else return false的函数，该函数可用于确定是否呈现输入字段。

要了解有关您的问题的更多信息，请考虑查看以下React文档：

不受控制的组件-https://reactjs.org/docs/uncontrolled-components.html

受控组件-https://reactjs.org/docs/forms.html#controlled-components

如何修复单选按钮的可编辑输入文本字段

1 个答案: