如何使用reactstrap获取按钮点击输入答案

【问题标题】：How to get input on button click with reactstrap如何使用reactstrap获取按钮点击输入
【发布时间】：2021-10-28 04:53:27
【问题描述】：

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

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;

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

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

【问题讨论】：

标签： javascript reactjs reactstrap

【解决方案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;

【讨论】：