Реагировать на «setState» в чистой ES2015 функции

Реагировать newb здесь. У меня есть чистая функция, которая возвращает форму (компонент представления). В этой форме мне нужно обрабатывать события onChange для тех текстовых полей, которые контролируются. FWIU, мне нужно this.setState (...) в обработчиках событий onChange. Однако из-за того, что это чистая функция, у меня нет доступа к this.setState(). Есть ли хороший способ установить состояние этих событий onChange в функции ES2015? Я также использую сокращение, если это помогает. Пример кода:Реагировать на «setState» в чистой ES2015 функции

import React, {PropTypes} from 'react' 

const ApplicationForm = ({submitHandler, person}) => (
<form onSubmit={e => submitHandler(e)}> 
<div> 
      <label htmlFor="firstName">First Name:</label> 
      <input type="text" name="firstName" onChange={e => setState(e.target.value)} value={person.firstName || ''}/> 
</div> 
... 
</form> 
)

источник

2016-08-16 Los Morales

«Без гражданства» == ... ну, ни одного государства. Действия - это канонический способ сделать это, например, вы можете передать обработчик изменений в качестве свойства в «ApplicationForm» или импортировать функцию (я склоняюсь к первому, чтобы было легче протестировать). Однако вы, вероятно, все же хотите использовать 'propTypes'. В общем, я бы также рекомендовал передать только те свойства, которые вам действительно нужны, а не попасть в объект. –

Это Stateless Function, нет ни одного государства, чтобы установить

Если вы используете Redux, вы, вероятно, хотите, чтобы вызвать действие Redux в OnChange, передавая новое значение как аргумент, и имеет обновление ACTION значения ПгвЬЫата в Redux магазине для person.firstName

Я рекомендовал бы взглянуть на redux-form уменьшить кучу шаблонного

источник

2016-08-16 20:13:08 CheapSteaks

Спасибо за комментарии каждого. Раньше я пробовал редукционную форму (6.0rc4), но имел проблемы при использовании саги, поэтому я ее оставил. Поэтому я просто преобразовал эту функцию без состояния в класс компонента вместо этого, чтобы использовать setState. У меня было только несколько редактируемых полей, поэтому это не было проблемой. –

Stateless функционального compone nts не может иметь состояние ... потому что они без гражданства. Если вы хотите, чтобы обработчики событий вызывали и определяли состояние, вам необходимо создать класс компонента, либо через React.createClass, либо с помощью классов ES6.

источник

2016-08-16 20:51:18

Фактически вы можете использовать setState в том, что выглядит как функциональный компонент, но довольно хаки. Я предполагаю, что этот метод - это только люди, которые действительно не могут стоять, используя это ключевое слово и синтаксис классов. Тем не менее, я думаю, что это весело.

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

class App extends React.Component { 
    constructor(props) { 
     super(props); 
     this.state = {text: "Hello, world"}; 
    } 

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

    render() { 
     return (
      <div> 
       <input value={this.state.text} onChange={this.handleChange} /> 
       <h1>{this.state.text}</h1> 
      </div> 
     ) 
    } 
}

А вот как вы можете создать такой же эффект без этот и класс синтаксиса :

function App() { 
    "use strict"; 

    const obj = { 
     state: {text: "Hello, world"}, 
     __proto__: React.Component.prototype 
    }; 

    obj.handleChange = function (event) { 
     obj.setState({text: event.target.value}); 
    }; 

    obj.render = function() { 
     return (
      <div> 
       <input value={obj.state.text} onChange={obj.handleChange} /> 
       <h1>{obj.state.text}</h1> 
      </div> 
     ); 
    }; 

    return obj; 
}

хитрость заключается в том, чтобы сделать функцию наследуют App от React.Component, установив Dunder прото свойство объекта App возвращается в REAC прототип t.Component, чтобы он мог использовать setState.

Вот вам codepen, если вы хотите поиграть с кодом.

источник

2017-03-10 18:59:56 Jacquen

Реагировать на «setState» в чистой ES2015 функции

ответ

Смежные вопросы