Wenn es mit redux-form
verwendet wird und onChange
eine "Change"-Aktion auslöst, bewirkt dies, dass AceEditor neu rendert und den Cursor an das Ende des Editors setzt.. verhindert, dass Änderungen vorgenommen werden
@venil7 konntest du einen ACE-Editor in einer Redux-Form integrieren?
Ich muss genau dasselbe tun, könnten Sie bitte ein Codebeispiel bereitstellen?
import React from 'react'
import AceEditor from 'react-ace'
export default function ReduxAce (props) {
const {
input,
theme = 'github',
mode = 'html',
fontSize = 14,
tabSize = 2,
width = '1000px',
height = '500px',
...custom
} = props
return (
<AceEditor
theme={theme}
mode={mode}
fontSize={fontSize}
tabSize={tabSize}
width={width}
height={height}
editorProps={{$blockScrolling: true}}
{...input}
{...custom}
/>
)
}
und benutze es dann:
import React from 'react'
import { reduxForm } from 'redux-form'
import ReduxAce from './path/to/ReduxAce'
function MyForm (props) {
const { handleSubmit } = props
return (
<form onSubmit={handleSubmit}>
<Field
name='staticHtml'
component={ReduxAce}
/>
</form>
)
}
export default reduxForm({
form: 'edit-static-html',
onSubmit (values, dispatch, props) {
console.log('submit...')
}
})(MyForm)
So einfach ist das und es funktioniert super!
Ich habe gerade ein ähnliches Problem.
Ich verwende React-Ace in Redux-Form als eine an Field übergebene Komponente - genau wie oben.
Jedes Mal, wenn der Editor den Fokus verliert, wird der Wert auf "" gesetzt und zwei Punkte werden im Ass-Editor angezeigt.
Mein Code ist genau wie von jschlieber vorgeschlagen, schau mal:
`react von 'react' importieren
AceEditor aus 'react-ace' importieren
import _ aus 'lodash';
import 'Klammer/Modus/Javascript';
import 'Klammer/Thema/Monokai';
Standardfunktion ReduxAce (Requisiten) exportieren {
console.log (props.input.onBlur, Requisiten);
const {
input,
theme = 'monokai',
mode = 'javascript',
fontSize = 14,
tabSize = 2,
width = '1000px',
height = '500px',
...custom
} = props;
return (
<AceEditor
theme={theme}
mode={mode}
fontSize={fontSize}
tabSize={tabSize}
width={width}
height={height}
onBlur={() => props.input.onBlur(props.input.value)}
editorProps={{$blockScrolling: Infinity}}
{...input}
{...custom}
/>
)
}`
und
`importiere React, {Komponente} aus 'react';
import { connect } from 'react-redux';
importiere { saveDraft } aus '../actions/index';
import { bindActionCreators } aus 'redux';
import { Field, reduxForm } from 'redux-form';
Importiere ReduxAce aus ‚../components/redux_ace‘
const ID = 'id123', NAME = 'name123', SOME_CODE = 'code123';
Funktion mapStateToProps({Entwurf}) {
Rückkehr {
Entwurf
};
}
Funktion mapDispatchToProps(Versand) {
return bindActionCreators({
Entwurf speichern
}, versenden)
}
Klasse Entwurf erweitert Komponente {
renderField(field) {
return (
<div className="form-group">
<label>{field.label}</label>
<input
className="form-control"
type="text"
{...field.input}
/>
</div>
)
}
onSubmit(values) {
console.log('sub',values);
this.props.saveDraft({
id: values[ID],
name: values[NAME],
code: values[SOME_CODE]
});
}
render() {
const { handleSubmit } = this.props;
return (
<form onSubmit={handleSubmit(this.onSubmit.bind(this))}>
<Field
label="Id"
name={ID}
component={this.renderField}
/>
<Field
label="Name"
name={NAME}
component={this.renderField}
/>
<Field
label="Lambda code"
name={SOME_CODE}
component={ReduxAce}
/>
// if I put it here, then it suddenly works fine <ReduxAce/>
<button type="submit" className="btn btn-primary"> Submit</button>
</form>
);
}
}
Standard-ReduxForm exportieren ({
bestätigen,
Formular: 'Formularentwurf'
})(
connect(mapStateToProps, mapDispatchToProps) (Entwurf)
)`
kurz vor dem Button habe ich gerade einen Kommentar gesetzt, " // wenn ich es hier reinsetze, dann funktioniert es plötzlich einwandfrei
Danke für jeden Hinweis!