Question

我已经输入了每个输入的数字，但是输入结果，我要按任意键才能显示之前输入的数字的结果。如何不按任何键自动显示结果？

const TextInput = () => {
  const [input, setinput] = useState({
    one: "",
    two: "",
    three: ""
  });
  let [number, setnumber] = useState("");
  const handleChangeInput = (event) => {
    setinput((prevState) => ({
      ...prevState,
      [event.target.name]: Number(event.target.value)
    }));
  };

  let x = Number(Object.values(input).join(""));
  return (
    <div>
      <input
        name="one"
        value={input.one}
        onChange={handleChangeInput}
        placeholder="Enter value"
      />
      <input
        name="two"
        value={input.two}
        onChange={handleChangeInput}
        placeholder="Enter value"
      />
      <input
        name="three"
        value={input.three}
        onChange={handleChangeInput}
        placeholder="Enter value"
      />
      <div className="rs">
        <label>Result:</label>
        <input
          value={number}
          onChange={() => setnumber(x)}
          autoComplete="one-time-code"
        />
      </div>
    </div>
  );
};
export default TextInput;

或者通过codeandbox我的代码：https://codesandbox.io/s/long-dust-qte9i

Answer 1

这是一种方法，我使用 useEffect 检测三个输入何时发生更改，以更新结果字段：

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

const TextInput = () => {
  const [input, setinput] = useState({
    one: "",
    two: "",
    three: "",
    result: "",
  });
  const handleChangeInput = (event) => {
    setinput((prevState) => ({
      ...prevState,
      [event.target.name]: Number(event.target.value),
    }));
  };

  useEffect(() => {
    if (input.one || input.two || input.three) {
      setinput((prevState) => ({
        ...prevState,
        result: `${input.one}${input.two}${input.three}`,
      }));
    }
  }, [input.one, input.two, input.three]);

  return (
    <div>
      <input
        name="one"
        value={input.one}
        onChange={handleChangeInput}
        placeholder="Enter value"
      />
      <input
        name="two"
        value={input.two}
        onChange={handleChangeInput}
        placeholder="Enter value"
      />
      <input
        name="three"
        value={input.three}
        onChange={handleChangeInput}
        placeholder="Enter value"
      />
      <div className="rs">
        <label>Result:</label>
        <input
          name="result"
          value={input.result || ""}
          autoComplete="one-time-code"
          readOnly
        />
      </div>
    </div>
  );
};
export default TextInput;

组合 React 中的每个值

1 个答案: