Cuando se usa con redux-form
, y onChange
envía una acción de "cambio", esto hace que AceEditor se vuelva a renderizar y coloca el cursor al final del editor... evitando que se realicen cambios.
@venil7 , ¿ha podido integrar un editor ACE en forma redux?
Tengo que hacer exactamente lo mismo, ¿podría proporcionar algún ejemplo de código, por favor?
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}
/>
)
}
y luego usarlo:
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)
¡Es tan simple como eso y funciona muy bien!
Tengo un problema similar en este momento.
Estoy usando react-ace dentro de redux-form, como un componente pasado a Field, al igual que arriba.
Cada vez que el editor pierde el foco, el valor se establece en "" y se muestran puntos dentro del editor as.
Mi código es como lo propuso jschlieber, echa un vistazo:
`importar Reaccionar desde 'reaccionar'
importar AceEditor desde 'react-ace'
importar _ desde 'lodash';
importar 'corsé/modo/javascript';
import 'corsé/tema/monokai';
función predeterminada de exportación ReduxAce (accesorios) {
consola.log(props.input.onBlur, props);
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}
/>
)
}`
y
`importar React, {Componente} de 'react';
importar {conectar} desde 'react-redux';
import { saveDraft } desde '../actions/index';
importar { bindActionCreators } de 'redux';
import { Field, reduxForm } from 'redux-form';
importar ReduxAce desde '../components/redux_ace'
const ID = 'id123', NAME = 'name123', SOME_CODE = 'code123';
función mapStateToProps({borrador}) {
regreso {
sequía
};
}
función mapDispatchToProps(despacho) {
devuelve enlazarCreadores de acción({
guardar borrador
}, envío)
}
borrador de clase extiende Componente {
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>
);
}
}
exportar reduxForm predeterminado ({
validar,
formulario: 'Borrador de formulario'
})(
connect(mapStateToProps, mapDispatchToProps)(Borrador)
)`
justo antes del botón puse un comentario ahora mismo, " // si lo pongo aquí, entonces de repente funciona bien
¡Gracias por cualquier sugerencia!