反应：不受控制/受控输入

Question

function InputArea(props) {

    const [inputText, setInputText] = useState({
       inputText: {text: ""}
    });

    function handleChange(event){
        setInputText(event.target.value);
    }

    function handleClick(event) {
        props.onSubmit(inputText);
        setInputText({text: ""});
        event.preventDefault();
    }

    return(
             <div className="input-group w-50">
                <input 
                    type="text" 
                    className="form-control" 
                    onChange={handleChange} 
                    ariadescribedby="button-addon" 
                    value={inputText.text} 
                    placeholder="Insert Item">
                </input>
            <div className="input-group-append">
                <Button
                    id="button-addon"
                    color="dark"
                    style={{marginBottom: "2rem"}} 
                    onClick={handleClick}>Add Item
                </Button>
            </div>
        </div>
    )
}

Answer 1

问题在于如何更新状态、如何使用状态以及如何初始化状态。

与类中的setstate不同，使用钩子时，状态更新器的值不是合并而是替换，当您运行

setInputText({text: ""}); 

您的inputText将从其以前的结构中替换为

{
   inputText: {text: ""}
}

const [inputText, setInputText] = useState({
   text: ""
}); // initialise as an object

function handleChange(event){
    setInputText({ text: event.target.value }); // update the state object with text field
}

function handleClick(event) {
    props.onSubmit(inputText);
    setInputText({text: ""});
    event.preventDefault();
}

return(
         <div className="input-group w-50">
            <input 
                type="text" 
                className="form-control" 
                onChange={handleChange} 
                ariadescribedby="button-addon" 
                value={inputText.text} 
                placeholder="Insert Item">
            </input>
        <div className="input-group-append">
            <Button
                id="button-addon"
                color="dark"
                style={{marginBottom: "2rem"}} 
                onClick={handleClick}>Add Item
            </Button>
        </div>
    </div>
)