Question

我正在从后端获取数据，并将其显示在reactjs前端。我有一个表单，我们在输入中输入一些字符串，然后显示输出。我必须每次刷新页面以显示新数据。输入提交按钮后，我希望将状态设置为null。这里的问题是我已经为提交按钮分配了一个事件处理程序。单击提交按钮后如何将状态设置为null并同时显示我的输出。

const [myData, setMyData] = useState(null);
const [endP, setEndP] = useState(null);

const inputHandler = (event) => {
  setMyData(event.target.value);
};

const buttonHandler = (event) => {
  event.preventDefault();
  setEndP(`http://localhost:1000/userData?Q=${myData}`);
};

<form onSubmit={buttonHandler}>
  <input type="text" onChange={inputHandler} />
  <button type="submit">Get It</button>
</form>;

Answer 1

我可能认为您需要取消event.preventDefault（）因此，当您提交按钮类型时，页面将自动刷新，并且状态将再次更改为null

Answer 2

您可以通过提供value属性和onChange处理程序，将表单中的输入字段设为受控输入来执行此操作。表示initialState myData不能为null，如果将Itallyly设置为null，则将阻止输入字段，并且无法修改其值。在此处Controlled Input

了解更多

const FormComponent = (props) => {
    const [myData, setMyData] = useState("");
    const [endP, setEndP] = useState(null);

    const inputHandler = (event) => {
        setMyData(event.target.value);
    };

    const buttonHandler = (event) => {
        event.preventDefault();
        setEndP(`http://localhost:1000/userData?Q=${myData}`);
        setMyData('')
    };

    return (
        <form onSubmit={buttonHandler}>
            <input value={myData} type="text" onChange={inputHandler} />
            <button type="submit">Get It</button>
        </form>
    )
    
}

单击提交按钮后，将状态设置为初始状态

2 个答案: