Сохранение изменений из пользовательского компонента в React-Admin - PullRequest
Новая
       38

Сохранение изменений из пользовательского компонента в React-Admin

1 голос
/ 03 июня 2019

Как сохранить выходные данные пользовательского компонента обратно в модель React Admin?

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

Я новичок в React-Admin, и у меня ограниченный опыт работы с React, поэтому я полагаю, что упускаю что-то простое. 

const handleChange = (field) => (val, evt) => {
  // I reach here with `field` set to the instance of MyEditField, with `val`
  // set to the updated editor value, and `evt` the CodeMirror event

  // But now how do I update the underlying record?

  // The following will update the stored copy, but doesn't mark it as a change 
  // to be saved by the dataProvider.   (And I know it doesn't make sense with Redux.)

  field.props.record.myField = val;
}

class MyEditField extends Component {
  constructor(props) {
    super(props)
    this.value = beautify(props.record[props.source]);

    // CodeMirror setup

    this.options = {/* CodeMirror options */}
  }

  render() {
    return (
      <CodeMirror 
        ref="CodeMirror" 
        value={this.value} 
        onChange={handleChange(this)} 
        options={this.options}
      />
    )
  }  
}

export default addField(MyEditField)

Я выделяю handleChange здесь не потому, что я думаю, что именно в этом и заключается изменение, а только для того, чтобы продемонстрировать, что если мне нужно место для размещения правильного кода, у меня есть его. onBlur, вероятно, будет лучше. Дело в том, что у меня есть способ запустить любой нужный мне код с доступом к моему полю и экземпляру CodeMirror.

(Каррированная версия handleChange кажется немного странной, но была необходима, потому что какая-то комбинация обертки CodeMirror, которую я использую, и React-Admin, казалось, теряла мою ссылку this, даже если я использовал bind(this). Но я вхожу в эту функцию с правильно установленной field, так что это работает.)

Здесь все выглядит правильно с CodeMirror. Я думаю, мне просто нужно знать, как правильно отразить изменение.

Не думаю, что знаю, имеет ли это отношение, но я использую React CodeMirror Wrapper .

1 Ответ

2 голосов
/ 04 июня 2019

Это объясняется в документации

Вам нужно вызвать функцию onChange из формы-редукса input с вашим новым значением. input - это поддержка prop-admin, внедряемая в ваш компонент.

То же самое верно для чтения значения между прочим. Не проверяйте запись, так как она будет только начальной. Используйте input.value.

Что-то вроде: 

const MyEditField = ({ input }) => (
    <CodeMirror 
        ref="CodeMirror" 
        value={beautify(input.value)} 
        onChange={val => input.onChange(val)} 
        options={{
            // Options
        }}
    />
)

export default addField(MyEditField)
...