Как получить значение Textarea внутри Formsy React? - PullRequest
Новая
       25

Как получить значение Textarea внутри Formsy React?

0 голосов
/ 08 мая 2019

У меня был элемент Textarea внутри элемента Formsy, и я обнаружил, что входные данные не включают в себя содержимое Textarea.

После нескольких попыток я смог заставить его работать.Я добавил notesValue в состояние и обработчик onChange сохранил event.target.value в состояние (как предложено в Реакция изменения значений текстовой области ).Я также получил значение textarea из состояния, а не из входных данных.

Однако я ожидаю, что это должно быть более простым способом, без использования state и onChange.Кто-нибудь может предложить лучший способ?

Пожалуйста, посмотрите пример, который я создал: 

import React, { Component } from 'react'; //, setState 
import Formsy from 'formsy-react';


class FormsyWithTextArea extends Component {
    constructor(props) {
        super(props);
        this.state = {
            notesValue: ''
          };
        this.onContinueClick = this.onContinueClick.bind(this);
        this.handleTextAreaChange = this.handleTextAreaChange.bind(this);
        this.mapFormInputs=this.mapFormInputs.bind(this);
     }

    onContinueClick(inputs) {
        console.debug( JSON.stringify(inputs));
        this.props.saveOtherInfo(inputs);
     };
     //https://stackoverflow.com/questions/33245017/react-modifying-textarea-values
     handleTextAreaChange(event) {
        this.setState({notesValue: event.target.value});
      };
    render() {
        const {otherInfo } = this.props;
        let notes = (otherInfo && otherInfo.notes) || '';
         return (
                <div  id="other-details-section">
                      <Formsy 
                        className="panel"
                        mapping={this.mapFormInputs}
                        onValidSubmit={this.onContinueClick}
                    >
                        <textarea  id="notes" name="notes"   defaultValue={`${notes}`}   onChange={this.handleTextAreaChange} 
                             data-autosize="true" placeholder="Enter your message...">
                        </textarea> 
                         <button className="btn-request ">Request</button>  
                    </Formsy>
                </div>
        );
    }


  mapFormInputs(inputs) {
    console.debug('mapFormInputs '+JSON.stringify (inputs));
    return {
        notes:this.state.notesValue, //inputs.notes,
          };
}
} //end of class



export default FormsyWithTextArea;
...