javascript - 如何使用这个 React 组件来收集表单数据?

我创建了两个组件,它们共同创建了一个“渐进式”风格的输入表单。我选择这种方法的原因是因为问题可能会更改文本或更改顺序,因此会从存储在名为 CustomerFeedback 的 JS 文件中的数组中拉入组件中。

到目前为止,我一直在尝试添加一个数据处理函数,当用户单击“继续”按钮时将触发该函数。该函数应该从所有呈现的问题中收集所有答案,并将它们 store 收集到一个名为 RawInputData 的数组中。我已经设法使用下面显示的代码使其在 SurveyForm 的硬编码版本中工作,但我还没有找到一种方法使其足够动态以与 SurveyQuestion 组件一起使用。谁能帮我让dataHander函数动态收集数据?

回答1

我做了什么:

https://codesandbox.io/s/angry-dew-37szi2?file=/src/InputForm.js:262-271

所以,我们可以让它变得更简单,你只需在从 props 调用处理程序时传递必要的数据:

const inputRef = React.useRef();

  const handleNext = () => {
    props.clickHandler(props.reference, inputRef.current.value);
  };

并将其合并到 InputForm 组件中:

const [inputData, setInputData] = useState({});

  const handler = (thisIndex) => (key, value) => {
    if (thisIndex === currentIndex) {
      setCurrentIndex(currentIndex + 1);
      setInputData((prev) => ({
        ...prev,
        [key]: value
      }));
    }
  };

  // ...
    <Question
        // ...
        clickHandler={handler(question.index)}
      />

所以,你想要数组(我认为对象更方便),如果你愿意,你可以像数组一样保存数据:

setInputData(prev => [...prev, value])

最初,我以为您想在 InputForm 中收集有关按钮单击的数据,但显然您可以不这样做,这个解决方案更简单

使用 useImperativeHandle 的 UPD Apouach:如果我们想从子组件触发一些逻辑,我们应该在 forwardRef+useImperativeHandle 的帮助下为此创建句柄:

const Question = React.forwardRef((props, ref) => {
  const inputRef = React.useRef();

  React.useImperativeHandle(
    ref,
    {
      getData: () => ({
        key: props.reference,
        value: inputRef.current.value
      })
    },
    []
  );

在此之后,我们可以将所有 ref 保存在父组件中:

const questionRefs = React.useRef(
    Array.from({ length: QuestionsText.length })
  );

  // ...

  <Question
     key={question.id}
     ref={(ref) => (questionRefs.current[i] = ref)}

我们可以在需要时处理这些数据:

const handleComplete = () => {
    setInputData(
      questionRefs.current.reduce((acc, ref) => {
        const { key, value } = ref.getData();
        return {
          ...acc,
          [key]: value
        };
      }, {})
    );
  };

在此处查看 ref 如何使用:https://reactjs.org/docs/forwarding-refs.htmlhttps://reactjs.org/docs/hooks-reference.html#useimperativehandle

我仍然强烈建议使用带有嵌套表单的 react-hook-form 来处理它

相似文章

最新文章