reactjs React等效于ng模型

6mzjoqzu  于 2023-02-18  发布在  React
关注(0)|答案(5)|浏览(139)

React的新手,我有一个TextField,我想将一个值"绑定"到它,我想让它在用户向TextField输入值时更改值,并在通过一些API调用更改值时更新TextField。
有什么办法吗?

55ooxyrt

55ooxyrt1#

您可以使用stateonChange执行此操作。简单示例如下:

<TextField
  onChange={(name) => this.setState({name})}
  value={this.state.name}
/>

基于变量更新TextInput的指南是located in the docs

oalqel3c

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>
    );
  }
}
blmhpbnm

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>
  )
}
pzfprimi

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'));
9nvpjoqh

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工作

相关问题