我如何在react中将2个输入框连接到一个函数

vkc1a9a2  于 2023-04-22  发布在  React
关注(0)|答案(2)|浏览(134)
> weightCalc(event) { console.log(event) }
> 
>   render() {
>     return (
>       <div>
> 
> 
> 
> 
> 
> <label>
>         Stones 
> 
>         <input type="textbox" name="test" onChange={this.weightCalc}/>
>         </label>
>         
>         <label>
>           Pounds <input type="textbox" name="test2" onChange={this.weightCalc} />  
>         </label>

我希望能够使用从2个输入值的一个函数,然后更新状态请

mwg9r5ms

mwg9r5ms1#

这将根据输入字段的名称进行更新,但它们应该与状态中的键值相匹配,以使用特定值更新/同步它们。

weightCalc(event) { this.setState({ [event.target.name]: event.target.value }); }
 
   render() {
     return (
       <div> 
       <label>
         Stones 
           <input type="textbox" name="test" onChange={this.weightCalc} value={this.state.test}/>
         </label>
         
         <label>
           Pounds <input type="textbox" name="test2" onChange={this.weightCalc} value={this.state.test2} />  
         </label>
drkbr07n

drkbr07n2#

我在onChange中使用了两个refs并相互更新。类似于:

const AmazingInput = () => {
  const ref1 = useRef(null);
  const ref2 = useRef(null);
  return (
    <div>
      <Input ref={ref1} onChange={(e) => ref2.current.target.value = e.target.value}>
      <Input ref={ref2} onChange={(e) => ref1.current.target.value = e.target.value}>
    </div>
  )
}

相关问题