在 <Input>如 <TextInput>上 onChange => 如何将此值发送到不同的字段？

问题描述

我有 <TextInput> 1 和 <TextInput> 2。

当我在 1 中输入“Foo”时，我希望 2 也 ==“Foo”，例如：

<TextInput
  label='From Here (Send val to below)'
  source='firstName'
  onChange={ val => sendThisValToTextInputBelow(val) }
/>

<TextInput
  label='To Here (Receive val from above)'
/>
  

解决方法

使用状态管理，并引用相同的状态变量：

const [ value,setValue ] = useState('');

<TextInput
  label='From Here (Send val to below)'
  source='firstName'
  value={ value }
  onChange={ val => setValue(val) } />

<TextInput
  value={ value }
  label='To Here (Receive val from above)' />

,

你可以通过一个状态变量来做到这一点。然后只在 TextInput 中使用那个状态变量。

Stackblitz Demo

功能组件

const [firstName,setFirstName] = useState('');

<TextInput
  label='From Here (Send val to below)'
  source='firstName'
  value={firstName} 
  onChange={(e) => setFirstName(e.target.value)}
/>

<TextInput
  label='To Here (Receive val from above)'
  value={firstName}
/>
  

基于类的组件

constructor() {
   this.state = {
     firstName: ''
   }
}

<TextInput
  label='From Here (Send val to below)'
  source='firstName'
  value={firstName} 
  onChange={(e) => this.setState({ firstName: e.target.value })}
/>

<TextInput
  label='To Here (Receive val from above)'
  value={firstName}
/>