如何使用 React 在单击提交按钮后更改表单输入的值

Question

我是 React 新手。我正在编写一个简单的表单，使用 useState 和 useReducer 挂钩。在输入字段中键入数字 ex 后。 5，并提交表单，我在 HTML 页面顶部显示的 textField 值等于 16。我希望这个数字作为新的初始状态或值自动插入输入字段中。我尝试通过键入以下内容来执行此操作：value={textField} 但在那种情况下，我无法修改 HTML 页面上的输入字段。

import React, {useReducer, useState} from "react";

export default function App(){
    const [text, setText] = useState(0);

    console.log(text)
    function handleChange(e) {
        e.preventDefault();
        setText(e.target.value)
    }

    function onSubmit(e){
        e.preventDefault()
        setTextField()
    }

    const [textField, setTextField] = useReducer(

        (textField) => {
            textField = text;
            if (textField === 1){
                textField=1;
            }else if (textField%2 === 0){
                textField = textField/2
            }else if (textField%2 !== 0){
                textField = textField * 3 + 1;
            }
            return textField;
        }, 0);

    return (
        <div>
            <form onSubmit>
            <h1>{textField}</h1>
            <input type="text"
                    value={text}
                    onChange={handleChange}/>
                   <button className="button"
                           onClick={onSubmit}
                   >
                       Collatz it!
                   </button>
            </form>
        </div>
    )
}

Answer 1

在从 useReducer 返回 textField 值之前，您可以使用 setText 更新 text 的值。像这样。 Working Demo

import React, { useReducer, useState } from "react";

export default function App() {
  const [text, setText] = useState(0);

  console.log(text);
  function handleChange(e) {
    e.preventDefault();
    setText(e.target.value);
  }

  function onSubmit(e) {
    e.preventDefault();
    setTextField();
  }

  const [textField, setTextField] = useReducer((textField) => {
    textField = text;
    if (textField === 1) {
      textField = 1;
    } else if (textField % 2 === 0) {
      textField = textField / 2;
    } else if (textField % 2 !== 0) {
      textField = textField * 3 + 1;
    }
    setText(textField);
    return textField;
  }, 0);

  return (
    <div>
      <form onSubmit>
        <h1>{textField}</h1>
        <input type="text" value={text} onChange={handleChange} />
        <button className="button" onClick={onSubmit}>
          Collatz it!
        </button>
      </form>
    </div>
  );
}

Answer 2

我认为放弃 reducer 使其更简单，并为“textField”数字添加另一个本地状态应该可以解决它，例如：

import React, { useState } from "react";

export default function App() {
  const [text, setText] = useState(0);
  const [textField, setTextField] = useState(0);

  console.log(text);
  function handleChange(e) {
    e.preventDefault();
    setText(e.target.value);
  }

  function onSubmit(e) {
    e.preventDefault();
    setTextField(getTextField(textField));
  }

  function getTextField(textField) {
    let result = 0;
    if (textField === 1) {
      result = 1;
    } else if (textField % 2 === 0) {
      result = textField / 2;
    } else if (textField % 2 !== 0) {
      result = textField * 3 + 1;
    }
    return result;
  };

  return (
    <div>
      <form onSubmit>
        <h1>{textField}</h1>
        <input type="text" value={text} onChange={handleChange} />
        <button className="button" onClick={onSubmit}>
          Collatz it!
        </button>
      </form>
    </div>
  );
}

Answer 3

据我了解，您只需在 setTextField

之后的文本值中设置 textField 值

onSubmit 函数应该如下所示：

function onSubmit(e) {
  e.preventDefault();
  setTextField();
  setText(textField);
}

如何使用 React 在单击提交按钮后更改表单输入的值

How to change, using React, the value of a form input after clicking the submit button

javascript

reactjs