如何使用 reactstrap 在按钮点击时获取输入

Question

我有一个输入字段，当单击该按钮时，我想将输入存储到一个变量并将其输出到控制台。这是我的代码：

function InputDD() {
       const [inputValue, setInputValue] = useState('');
       const onChangeHandler = event => {
           setInputValue(event.target.value);
       };
       //console.log(inputValue) <- Not working
     
       return(
       <div>
       <Form>
           <FormGroup>
                <Input type="lk" name="inputK" id="inputK" className="ink" value={inputValue} onChange={onChangeHandler} /> 
           </FormGroup>
           <Button size="sm" className="nextbtn">Lets roll</Button>
<!--Not working -> <Button size="sm" className="nextbtn" onClick={console.log(inputValue)}>Lets roll</Button>-->
       </Form>
       </div>
       )
}

export default InputDD;

目前，无论何时输入，按键都会在控制台中输出，如下图所示：

我不想要这个，只希望将输入的整个文本存储到一个变量中，并在单击按钮时打印到控制台。

Answer 1

    function InputDD() {
           const [inputValue, setInputValue] = useState('');
           const onChangeHandler = event => {
               setInputValue(event.target.value);
           };
           const handleSubmit = (e) => {
              e.preventDefault()
              console.log(inputValue) //working
           }
    
           
         
           return(
           <div>
           <Form onSubmit={(e) => handleSubmit(e)}>
               <FormGroup>
                    <Input
type="lk" 
name="inputK" 
id="inputK" 
className="ink" 
value={inputValue} 
onChange={(e) => onChangeHandler(e)} 
/> 
               </FormGroup>
               <Button size="sm" className="nextbtn">
Lets roll
</Button>
    <Button size="sm" className="nextbtn" type="submit">
Lets roll
</Button>
           </Form>
           </div>
           )
    }
    
    export default InputDD;

如何使用 reactstrap 在按钮点击时获取输入

How to get input on button click with reactstrap

javascript

reactjs

reactstrap