Связывание данных в реакции

Ответ 1

Связывание данных в реактиве может быть достигнуто с помощью controlled input. Управляемый вход достигается путем привязки значения к событию state variable и a onChange для изменения состояния при изменении входного значения.

См. ниже фрагмент

class App extends React.Component {
  constructor() {
    super();
    this.state = {value : ''}
  }
  handleChange = (e) =>{ 
    this.setState({value: e.target.value});
  }
  render() {
    return (
    <div>
        <input type="text" value={this.state.value} onChange={this.handleChange}/>
        <div>{this.state.value}</div>
    </div>
   )
  }
}
ReactDOM.render(<App/>, document.getElementById('app'));

<script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.1.0/react.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.1.0/react-dom.js"></script>
<div id="app"></div>

Ответ 2

Короче говоря, в React нет двухсторонней привязки данных.

Поэтому, когда вы хотите реализовать эту функцию, попробуйте определить state и напишите так: прослушивание событий, обновление состояния и рендеринг для вас:

class NameForm extends React.Component {
  constructor(props) {
    super(props);
    this.state = {value: ''};

    this.handleChange = this.handleChange.bind(this);
  }

  handleChange(event) {
    this.setState({value: event.target.value});
  }

  render() {
    return (
      <input type="text" value={this.state.value} onChange={this.handleChange} />
    );
  }
}

Подробности здесь https://facebook.github.io/react/docs/forms.html

Есть люди, которые хотят писать с двухсторонним связыванием, но React не работает таким образом. Если вы хотите писать так, вы должны использовать дополнение для React, например так:

var WithLink = React.createClass({
  mixins: [LinkedStateMixin],
  getInitialState: function() {
    return {message: 'Hello!'};
  },
  render: function() {
    return <input type="text" valueLink={this.linkState('message')} />;
  }
});

Подробности здесь https://facebook.github.io/react/docs/two-way-binding-helpers.html

Для refs, это просто решение, которое позволяет разработчикам обращаться к DOM в методах компонента, см. Здесь https://facebook.github.io/react/docs/refs-and-the-dom.html.

Ответ 3

Чтобы связать элемент управления с вашим состоянием, вам нужно вызвать функцию на компоненте, который обновляет состояние из обработчика события управления.

Вместо того, чтобы иметь функцию обновления для всех полей формы, вы можете создать общую функцию обновления с использованием функции вычисленного имени ES6 и передать ей значения, необходимые для этого внутри элемента управления следующим образом:

class LovelyForm extends React.Component {
  constructor(props) {
  alert("Construct");
    super(props);
    this.state = {
      field1: "Default 1",
      field2: "Default 2"
    };
  }

  update = (name, e) => {
    this.setState({ [name]: e.target.value });
  }

  render() {
    return (
      <form>
        <p><input type="text" value={this.state.field1} onChange={(e) => this.update("field1", e)} />
          {this.state.field1}</p>
        <p><input type="text" value={this.state.field2} onChange={(e) => this.update("field2", e)} />
          {this.state.field2}</p>
      </form>
    );
  }
}
ReactDOM.render(<LovelyForm/>, document.getElementById('example'));

<script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.1.0/react.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.1.0/react-dom.min.js"></script>
<div id="example"></div>

Ответ 4

С внедрением хуков React управление состоянием (включая формы) стало очень простым и, на мой взгляд, более понятным и предсказуемым по сравнению с магией других фреймворков. Например:

const MyComponent = () => {
    const [value, setValue] = React.useState('some initial value');
    return <input value={value} onChange={e => setValue(e.target.value)} />;
}

Этот односторонний процесс позволяет понять, как обновляются данные и когда происходит рендеринг. Простой, но мощный, чтобы делать любые сложные вещи предсказуемым и понятным способом. В этом случае выполните двустороннюю привязку состояния формы.

В примере используется строковое значение примитива. Комплексное государственное управление, например. таким же образом можно управлять объектами, массивами, вложенными данными, но это проще с помощью библиотек, таких как Hookstate (отказ от ответственности: я являюсь автором этой библиотеки). Вот пример комплексного государственного управления.

Когда форма растет, возникает проблема с производительностью рендеринга: состояние формы изменяется (поэтому требуется повторное рендеринг) при каждом нажатии клавиши в любом поле формы. Эта проблема также решена Hookstate. Вот пример формы с 5000 полями: состояние обновляется для каждого хранилища ключей, и при этом вообще не наблюдается отставание в производительности.

Ответ 5

Есть люди, которые хотят писать с двухсторонним связыванием, но React не работает таким образом.

Это правда, есть люди, которые хотят писать с двусторонним связыванием данных. И нет ничего принципиально неправильного в том, что React мешает им делать это. Я бы не рекомендовал им использовать устаревший миксин React для этого. Потому что это выглядит намного лучше с некоторыми сторонними пакетами.

import { LinkedComponent } from 'valuelink'

class Test extends LinkedComponent {
    state = { a : "Hi there! I'm databinding demo!" };

    render(){
        // Bind all state members...
        const { a } = this.linkAll();

        // Then, go ahead. As easy as that.
        return (
             <input type="text" ...a.props />
        )
    }
}

Дело в том, что двусторонняя привязка данных - это шаблон проектирования в React. Вот моя статья с 5-минутным объяснением того, как это работает

Ответ 6

class App extends React.Component {
  constructor() {
    super();
    this.state = {value : ''}
  }
  handleChange = (e) =>{ 
    this.setState({value: e.target.value});
  }
  render() {
    return (
    <div>
        <input type="text" value={this.state.value} onChange={this.handleChange}/>
        <div>{this.state.value}</div>
    </div>
   )
  }
}
ReactDOM.render(<App/>, document.getElementById('app'));

<script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.1.0/react.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.1.0/react-dom.js"></script>
<div id="app"></div>

Ответ 7

Некоторые модули упрощают привязку данных в формах, например:

реагирует распределенную-форму

class SomeComponent extends React.Component {
  state = {
    first_name: "George"
  };

  render() {
    return (
      <Form binding={this}>
        <Input name="first_name" />
      </Form>
    );
  }
}

https://www.npmjs.com/package/react-distributed-forms#data-binding

Он использует контекст React, поэтому вам не нужно связывать входные данные в формах

Здесь живая демонстрация

Ответ 8

Не нужно ломать голову с помощью setState() в Reaction.js

Новая библиотека сделанная мной React-чоппер

Код, как angularjs в реагировать

Код без setState в реагировать

Просмотрите примеры для более подробного описания.

import React, { Component } from 'react';
import { render } from 'react-dom';
import Rcp from 'react-chopper';

class App extends Component {
  constructor(props) {
    super(props);
    this.state = {
      name: 'React'
    };
    this.modal = Rcp(this.state, this);
  }

  tank = () => {
    console.log(this.modal)
  }
  render() {
    return (
      <div>
        <input value={this.modal.name} onChange={e => this.modal.name = e.target.value} />
        <p> Bang Bang {this.modal.name} </p>
        <button onClick={() => this.tank()}>console</button>
      </div>
    );
  }
}

render(<App />, document.getElementById('root'));

Комментарии, Pr Добро пожаловать... Наслаждайтесь

Ответ 9

С новой функцией под названием Hooks от команды React, которая создает функциональные компоненты для обработки изменений состояния. Ваш вопрос может быть легко решен

import React, { useState, useEffect } from 'react'
import ReactDOM from 'react-dom';

const Demo = props =>{
    const [text, setText] = useState("there");
    return props.logic(text, setText);
};

const App = () => {
    const [text, setText] = useState("hello");

    const componentDidMount = () =>{
        setText("hey");
    };
    useEffect(componentDidMount, []);

    const logic = (word, setWord) => (
        <div>
            <h1>{word}</h1>
            <input type="text" value={word} onChange={e => setWord(e.target.value)}></input>
            <h1>{text}</h1>
            <input type="text" value={text} onChange={e => setText(e.target.value)}></input>
        </div>
    );
    return <Demo logic={logic} />;
};

ReactDOM.render(<App />,document.getElementById("root"));

Ответ 10

Определите атрибуты состояния. Добавьте универсальный обработчик события handleChange. Добавьте имя параметра в тег ввода для сопоставления.

this.state = { stateAttrName:"" }

handleChange=(event)=>{
    this.setState({[event.target.name]:event.target.value });
  } 

<input className="form-control" name="stateAttrName" value= 
{this.state.stateAttrName} onChange={this.handleChange}/>