Как создать функцию-обработчик, которая «обрабатывает» несколько текстовых полей, а также текстовые поля счетчика символов - PullRequest
Новая
       6

Как создать функцию-обработчик, которая «обрабатывает» несколько текстовых полей, а также текстовые поля счетчика символов

0 голосов
/ 09 января 2020

это продолжение: Как использовать функцию обработчика для двух разных целей. SPFX (React / TypeScript)

, в котором я немного продвинулся, так что это не дубликат, это как бы часть 2.

Мой текущий обработчик кода is: 

  const {value} = (evt.target as any);
  const countKey = `${evt.target.name}Count`;
  const obj = {
    [evt.target.name]: value,
    [countKey]: value.toString().length,
  };
  this.setState({
    ...this.state,
   obj
}, () => { console.log(obj), console.log(countKey+'countKey'), console.log(value+'value');});
}

Визуализация с полями, о которых идет речь: 

<td><TextField //THIS IS THE USER INPUT TEXTFIELD WHICH I WANT COUNTED BY THE TEXTFIELD BELOW!
        name="EssCrit1"
        value={this.state.EssCrit1}
        onChange={this.handleChange}
        multiline rows={2}
        />
        </td>
        <td ><TextField //THIS IS THE CHARACTER COUNTER FIELD!
        name="EssCritChars1"
        value={this.state.EssCrit1Count}
        disabled={true} 
        />
     </td>

Как вы видите, я записываю obj, и это показывает правильное значение текстового поля, введенное также: считая сколько символов. Проблема в том, что он не позволяет вводить текст в текстовое поле. Кажется, что значение (EssCrit1) и поле (EssCrit1Count) регистрируют нажатие клавиши, показывая: 

[object Object]: {EssCrit1: "h", EssCrit1Count: 1}
EssCrit1: "h"
EssCrit1Count: 1

__proto__: Object

в консоли. Но, как уже упоминалось, он не позволяет вводить текст в поле. Кажется, что состояние перезаписывается, как только что-то набрано. Или что-то еще, что не очевидно.

Если это поможет, это мое состояние для текстового поля EssCrit1 и его счетчика символов: 

EssCrit1:null,
EssCrit1Count: null,

1 Ответ

0 голосов
/ 10 января 2020

Отправлено с: 

public handleChange = (evt: any) => {
  const {value} = (evt.target as any);
  const countKey = `${evt.target.name}Count`;
  const obj = {
    [evt.target.name]: value,
    [countKey]: value.toString().length,
  };
  this.setState(prevState => ({prevState, ...obj}));
 }

и для рендеринга: 

<td><TextField
     name="EssCrit1"
     value={this.state.EssCrit1}
     onChange={this.handleChange}
     multiline rows={2}
     />
     </td>
     <td ><TextField 
     name="EssCrit1Count"
     value={this.state.EssCrit1Count}
     disabled={true}               
     />
     </td>

Соответствует тексту 'Count' в конце назначения переменной const CountKey из обработчика с помощью заявляет, что требовал этого. Основной проблемой было обновление штатов. Я изменил это значение на

this.setState(prevState => ({prevState, ...obj}));

с

this.setState(prevState => ({...prevState, newState });

, которое охватывает изменения, подробно описанные в обработчике. Надеюсь, это кому-нибудь поможет. Я собираюсь реконструировать то, что я узнал из великолепной помощи, которую я получил Спасибо всем как всегда.

...