如何解决在 <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
中使用那个状态变量。
功能组件
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}
/>
版权声明:本文内容由互联网用户自发贡献,该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请发送邮件至 dio@foxmail.com 举报,一经查实,本站将立刻删除。