React的新手,我有一个TextField,我想将一个值"绑定"到它,我想让它在用户向TextField输入值时更改值,并在通过一些API调用更改值时更新TextField。有什么办法吗?
55ooxyrt1#
您可以使用state和onChange执行此操作。简单示例如下:
state
onChange
<TextField onChange={(name) => this.setState({name})} value={this.state.name} />
基于变量更新TextInput的指南是located in the docs。
TextInput
oalqel3c2#
在React中实现这一点的方法是使用state。
import React from 'react'; export default class MyForm extends React.Component { constructor(props) { super(props); this.state = { text: 'default', text2: 'default' } } onChange(e) { var obj[e.target.name] = e.target.value this.setState(obj); } render() { return ( <div> <input type="text" name="text" value={this.state.text} onChange={this.onChange} /> <input type="text" name="text2" value={this.state.text2} onChange={this.onChange} /> </div> ); } }
blmhpbnm3#
React钩子也是一样
import React,{useState} from 'react'; export default MyForm = () => { const [text, setText] = useState('default') const [text2, setText2] = useState('default') return ( <div> <input type="text" name="text" value={text} onChange={(e)=> setText(e.target.value)} /> <input type="text" name="text2" value={text2} onChange={(e)=> setText2(e.target.value)} /> </div> ) }
pzfprimi4#
使用ngModal指令开箱即用实现Angular 工作中的两种数据绑定
NgModal:从域模型创建FormControl示例并将其绑定到窗体控件元素
import {Component} from '@angular/core'; @Component({ selector: 'example-app', template: ` <input [(ngModel)]="name" #ctrl="ngModel" required> <p>Value: {{ name }}</p> <p>Valid: {{ ctrl.valid }}</p> <button (click)="setValue()">Set value</button> `, }) export class SimpleNgModelComp { name: string = ''; setValue() { this.name = 'Nancy'; } }
在ReactJS中,我们没有这样一个内置的选项来处理双向数据绑定,你需要使用状态并添加一个onChange事件到输入。React受控输入允许我们在React中实现数据绑定:我们将一个值绑定到一个状态变量和一个onChange事件,以便在输入值改变时改变状态。参考以下片段:
class App extends React.Component { constructor() { super(); this.state = {name : ''} } handleChange = (e) =>{ this.setState({name: e.target.value}); } render() { return ( <div> <input type="text" value={this.state.name} onChange={this.handleChange}/> <div>{this.state.name}</div> </div> ) } } ReactDOM.render(<App/>, document.getElementById('app'));
9nvpjoqh5#
使用useState React钩子和TextInput非常简单
import { useState } from "react"; import { TextInput, Text, View } from "react-native"; const App = () => { const [text, setText] = useState("hello"); return ( <View> <TextInput value={text} onChangeText={setText} /> <Text>Text value: {text}</Text> </View> ); }; export default App;
看到它here工作
5条答案
按热度按时间55ooxyrt1#
您可以使用
state
和onChange
执行此操作。简单示例如下:基于变量更新
TextInput
的指南是located in the docs。oalqel3c2#
在React中实现这一点的方法是使用
state
。blmhpbnm3#
React钩子也是一样
pzfprimi4#
使用ngModal指令开箱即用实现Angular 工作中的两种数据绑定
NgModal:从域模型创建FormControl示例并将其绑定到窗体控件元素
在ReactJS中,我们没有这样一个内置的选项来处理双向数据绑定,你需要使用状态并添加一个onChange事件到输入。React受控输入允许我们在React中实现数据绑定:我们将一个值绑定到一个状态变量和一个onChange事件,以便在输入值改变时改变状态。
参考以下片段:
9nvpjoqh5#
使用useState React钩子和TextInput非常简单
看到它here工作