Question

我想通过单击“提交”按钮来设置状态，但不使用<form>标记，而只是输入和按钮。我的代码如下：

function Test() {
const [name, setName] = React.useState('John');

    function inputChange(e) {
        let val = e.target.value;
        setName(val)
    }

    function submitFun() {
        //here i want to setName() like "setName(val)", but the variable VAL has  local scope in inputChange()
    }

    return (
        <div>
            <h1>name: {name}</h1>
            <input onChange={inputChange} placeholder='name'/>
            <button onClick={submitFun}>SUBMIT</button>
        </div>
    )
}

ReactDOM.render(
  <Test/>,
  document.getElementById('root')
);

<script src="https://unpkg.com/react@16.7.0-alpha.0/umd/react.development.js"></script>
<script src="https://unpkg.com/react-dom@16.7.0-alpha.0/umd/react-dom.development.js"></script>
<div id="root"></div>

现在，当我输入输入内容时，setName会设置该值。仅在单击按钮后，如何将我的想法实现为setName？

Answer 1

您可以使用(async ()=>{ while(await getBar(i)) { if (await getBar3(i)) { //do something } i++; } })();来获取ref的值，更多信息请参见doc。

在这里，我使用<input/>创建一个useRef对象并将其传递给ref（<input/>）。

然后我可以使用ref = {inputRef}来获取inputRef.current.value的值。

<input/>

function Test() {
    const [name, setName] = React.useState('John');
    
    const inputRef = React.useRef();

    function submitFun() {
        setName(inputRef.current.value)
    }

    return (
        <div>
            <h1>name: {name}</h1>
            <input placeholder='name' ref={inputRef} />
            <button onClick={submitFun}>SUBMIT</button>
        </div>
    )
}

ReactDOM.render(
  <Test/>,
  document.getElementById('root')
);

Answer 2

@Agney，您说得对；

function Test() {
    const [name, setName] = React.useState('');
    const [btn, setBtn] = React.useState('');


    function inputChange(e) {
        let val = e.target.value;
        setName(val)
    }

    function submitFun() {
        setBtn(name)
    }

    return (
        <div>
            <h1>name: {btn}</h1>
            <input value={name} onChange={inputChange} placeholder='name' />
            <button onClick={submitFun}>SUBMIT</button>
        </div>
    )
}
ReactDOM.render(
  <Test/>,
  document.getElementById('root')
);

<script src="https://unpkg.com/react@16.7.0-alpha.0/umd/react.development.js"></script>
<script src="https://unpkg.com/react-dom@16.7.0-alpha.0/umd/react-dom.development.js"></script>
<div id="root"></div>

设置状态，单击按钮

2 个答案: