Question

React的新功能，我有一个TextField，我希望将一个值“绑定”它，如果用户在TextField中输入值，我希望它更改值，如果值通过某个API调用更改，则更新TextField

有办法吗？

Answer 1

您可以使用state和onChange执行此操作。简单示例如下：

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

根据变量更新TextInput的指南是located in the docs。

Answer 2

在React中执行此操作的方法是使用state。这是JSX中的一个例子：

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

Answer 3

通过使用ngModal指令，可以有两种方式在角度工作中进行数据绑定

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 Controlled Input允许我们在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'));

Answer 4

与反应挂钩

相同

bundle install

相当于ng-model的反应

4 个答案: