примеры js-потоков данных

Question

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

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

Моя структура выглядит следующим образом:

<Root> 
    <FormContainer> 
     <FormBody> 
      <DraftEditor1> 
      <DraftEditor2> 
     <FormFooter> 
      <CancelButton> 
      <SubmitButton> 

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

Я тоже немного новый, чтобы реагировать, но я думаю, что я должен отправить событие отправки на SubmitButton в onClick handler, который передается из FormContainer.

Но в этом случае, как мне получить доступ и преобразовать EditorState в правильный формат данных, особенно учитывая, что у меня есть несколько DraftEditors в моей форме?

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

Answer 1

Я подготовил простой код, который может дать вам идею:

... 

_handleSubmit() { 
    // dispatch an action 
    // or save to redux store 
    const { draftEditor1, draftEditor2 } = this.state; 
    this.props.handleSubmit(draftEditor1, draftEditor2); 
} 

render() { 
    return (
     <FormContainer> 
     <FormBody> 
      <DraftEditor1 editorState={this.state.draftEditor1} onChange={this.onChange1}> 
      <DraftEditor2 editorState={this.state.draftEditor2} onChange={this.onChange2}> 
     </FormBody> 
     <FormFooter> 
      <CancelButton /> 
      <SubmitButton onClick={this._handleSubmit} /> 
     </FormFooter> 
     </FormContainer> 
    ); 
} 
...