0

我正在努力获取以文本字段作为标签的单选按钮的输入。

当旁边的文本字段接收用户输入时，我也很难动态地“检查”单选按钮。

它的最终目标是让它像谷歌表单一样运行，用户正在做一个 MCQ 问题，他/她选择“其他”选项，然后在文本字段中写一些文本。我希望能够在名为 selectedRadioButton 的对象中捕获输入文本，然后将 selectedRadioButton 附加到存储所有响应的数组中。

我遇到的另一个问题是我似乎无法捕获整个输入字符串，因为当我将输入的最后一个字符添加到对象状态时，它被切掉了。我的最后一个问题是，如何确保在不切掉任何内容的情况下捕获整个输入字符串？

这是我的 UI 的样子，您可以看到“所有响应”数组中的规范值没有显示整个文本输入。 我的代码

我用于处理标签中具有文本字段的单选按钮输入的代码（className="customOption"）：

// singleSelectQuestions is contains a function that returns jsx, which displays the suitable components based on the question attributes.
// In this case, all questions should be wrapped around by radio button components because they're all single select

const singleSelectQuestions = currQuestion.answerOptions.map(
 
  ({ answerText, price }) =>
    answerText !== "Custom" ? (
      <FormControlLabel
        value={answerText}
        control={<Radio />} // normal radio button
        label={answerText}
        price={price}
        // We need to capture the selected answer option and the price into a state for each option
        // The we will pass this state (object) into the hook that handles updating the entire response object

        onClick={() =>
          updateSelectedRadioButton({
            selectedAnswer: answerText,
            price: price,
          })
        }
      />
    ) : (
      <div className="customOption">
        <FormControlLabel
          control={<Radio />}
          value={answerText}
          price={price}
          floatingLabelFixed={true}
          label={
            <TextField
              required
              label="Please Specify"
              onKeyDown={(e) => updateSpecifications(e.target.value)}
            />
          }
          onClick={() =>
            updateSelectedRadioButton({
              selectedAnswer: answerText,
              specifications: specifications,
              price: 0,
            })
          }
        />
      </div>
    )
);

4

1 回答 1

0

这是一个如何从 中收集文本的工作<Input />示例<FormControlLabel />：


import React, { useState } from "react";
import { FormControlLabel, Radio, TextField } from '@material-ui/core';

export default function OtherInput() {

  const [ checked, setChecked ] = useState(false);

  const [ otherInfo, setOtherInfo ] = useState('');

  return (
    <div>
      <h1>"Other" Radio Input with Hook:</h1>
      <h2>Checked: {checked.toString()} </h2>
      <h2>Input result: {otherInfo} </h2>
      <FormControlLabel
          control={
            <Radio
            checked={checked}
            onClick={() => setChecked(!checked)}
            value="other"
            color='primary'
            label='other'/>
          }
          label={
            checked ?
              <TextField
                disabled={!checked}
                label="Please Specify"
                onKeyDown={(e) => setOtherInfo(e.target.value)}/>
            : 'Other'
          }/>

    </div>
  );
}

示例 CodeSandbox：https ://codesandbox.io/s/stack-65535893-otherinput-4hpm7?file=/src/OtherInput.js

于 2021-01-02T05:22:44.910 回答