ΠΡΠΈ ΠΈΡΠΏΠΎΠ»ΡΠ·ΠΎΠ²Π°Π½ΠΈΠΈ Ρ redux-form
, Π° onChange
ΠΎΡΠΏΡΠ°Π²Π»ΡΠ΅Ρ Π΄Π΅ΠΉΡΡΠ²ΠΈΠ΅ Β«ΠΈΠ·ΠΌΠ΅Π½ΠΈΡΡΒ», ΡΡΠΎ Π·Π°ΡΡΠ°Π²Π»ΡΠ΅Ρ AceEditor ΠΏΠΎΠ²ΡΠΎΡΠ½ΠΎ ΠΎΡΠΎΠ±ΡΠ°ΠΆΠ°ΡΡ ΠΈ ΠΏΠΎΠΌΠ΅ΡΠ°Π΅Ρ ΠΊΡΡΡΠΎΡ Π² ΠΊΠΎΠ½Π΅Ρ ΡΠ΅Π΄Π°ΠΊΡΠΎΡΠ°.. ΠΏΡΠ΅Π΄ΠΎΡΠ²ΡΠ°ΡΠ°Ρ Π²Π½Π΅ΡΠ΅Π½ΠΈΠ΅ ΠΊΠ°ΠΊΠΈΡ
-Π»ΠΈΠ±ΠΎ ΠΈΠ·ΠΌΠ΅Π½Π΅Π½ΠΈΠΉ
@ venil7 , Π²Π°ΠΌ ΡΠ΄Π°Π»ΠΎΡΡ ΠΈΠ½ΡΠ΅Π³ΡΠΈΡΠΎΠ²Π°ΡΡ ΡΠ΅Π΄Π°ΠΊΡΠΎΡ ACE Π² ΡΠ΅Π΄ΡΠΊΡ-ΡΠΎΡΠΌΡ?
Π― Π΄ΠΎΠ»ΠΆΠ΅Π½ ΡΠ΄Π΅Π»Π°ΡΡ ΡΠΎ ΠΆΠ΅ ΡΠ°ΠΌΠΎΠ΅, Π½Π΅ ΠΌΠΎΠ³Π»ΠΈ Π±Ρ Π²Ρ ΠΏΡΠ΅Π΄ΠΎΡΡΠ°Π²ΠΈΡΡ ΠΏΡΠΈΠΌΠ΅Ρ ΠΊΠΎΠ΄Π°, ΠΏΠΎΠΆΠ°Π»ΡΠΉΡΡΠ°?
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}
/>
)
}
Π° Π·Π°ΡΠ΅ΠΌ ΠΈΡΠΏΠΎΠ»ΡΠ·ΡΠΉΡΠ΅ Π΅Π³ΠΎ:
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)
ΠΡΠΎ ΡΠ°ΠΊ ΠΏΡΠΎΡΡΠΎ, ΠΈ ΡΡΠΎ ΠΏΡΠ΅ΠΊΡΠ°ΡΠ½ΠΎ ΡΠ°Π±ΠΎΡΠ°Π΅Ρ!
Π£ ΠΌΠ΅Π½Ρ ΡΠ΅ΠΉΡΠ°Ρ Π°Π½Π°Π»ΠΎΠ³ΠΈΡΠ½Π°Ρ ΠΏΡΠΎΠ±Π»Π΅ΠΌΠ°.
Π― ΠΈΡΠΏΠΎΠ»ΡΠ·ΡΡ react-ace Π²Π½ΡΡΡΠΈ redux-form, ΠΊΠ°ΠΊ ΠΊΠΎΠΌΠΏΠΎΠ½Π΅Π½Ρ, ΠΏΠ΅ΡΠ΅Π΄Π°Π½Π½ΡΠΉ Field, ΠΊΠ°ΠΊ ΠΈ Π²ΡΡΠ΅.
ΠΠ°ΠΆΠ΄ΡΠΉ ΡΠ°Π·, ΠΊΠΎΠ³Π΄Π° ΡΠ΅Π΄Π°ΠΊΡΠΎΡ ΡΠ΅ΡΡΠ΅Ρ ΡΠΎΠΊΡΡ, Π·Π½Π°ΡΠ΅Π½ΠΈΠ΅ ΡΡΡΠ°Π½Π°Π²Π»ΠΈΠ²Π°Π΅ΡΡΡ Π½Π° "" ΠΈ Π² ΡΠ΅Π΄Π°ΠΊΡΠΎΡΠ΅ ace ΠΎΡΠΎΠ±ΡΠ°ΠΆΠ°ΡΡΡΡ ΡΠΎΡΠΊΠΈ.
ΠΠΎΠΉ ΠΊΠΎΠ΄ ΡΠ°ΠΊΠΎΠΉ ΠΆΠ΅, ΠΊΠ°ΠΊ ΠΏΡΠ΅Π΄Π»ΠΎΠΆΠΈΠ» jschlieber, Π²Π·Π³Π»ΡΠ½ΠΈΡΠ΅:
`ΠΈΠΌΠΏΠΎΡΡΠΈΡΠΎΠ²Π°ΡΡ React ΠΈΠ· 'ΡΠ΅Π°ΠΊΡΠΈΠΈ'
ΠΈΠΌΠΏΠΎΡΡΠΈΡΠΎΠ²Π°ΡΡ AceEditor ΠΈΠ· Β«React-aceΒ»
ΠΈΠΌΠΏΠΎΡΡΠΈΡΠΎΠ²Π°ΡΡ _ ΠΈΠ· 'lodash';
ΠΈΠΌΠΏΠΎΡΡΠΈΡΠΎΠ²Π°ΡΡ 'ΡΠΊΠΎΠ±ΠΊΡ/ΡΠ΅ΠΆΠΈΠΌ/javascript';
ΠΈΠΌΠΏΠΎΡΡΠΈΡΠΎΠ²Π°ΡΡ ΡΠΊΠΎΠ±ΠΊΡ/ΡΠ΅ΠΌΡ/ΠΌΠΎΠ½ΠΎΠΊΠ°ΠΉ;
ΡΡΠ½ΠΊΡΠΈΡ ΡΠΊΡΠΏΠΎΡΡΠ° ΠΏΠΎ ΡΠΌΠΎΠ»ΡΠ°Π½ΠΈΡ ReduxAce (ΡΠ΅ΠΊΠ²ΠΈΠ·ΠΈΡ) {
console.log(ΡΠ΅ΠΊΠ²ΠΈΠ·ΠΈΡΡ.input.onBlur, ΡΠ΅ΠΊΠ²ΠΈΠ·ΠΈΡΡ);
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}
/>
)
}`
ΠΈ
`ΠΈΠΌΠΏΠΎΡΡΠΈΡΠΎΠ²Π°ΡΡ React, {ΠΠΎΠΌΠΏΠΎΠ½Π΅Π½Ρ} ΠΈΠ· 'ΡΠ΅Π°Π³ΠΈΡΠΎΠ²Π°ΡΡ';
ΠΈΠΌΠΏΠΎΡΡ {connect} ΠΈΠ· 'ΡΠ΅Π°Π³ΠΈΡΠΎΠ²Π°ΡΡ-ΡΠ΅Π΄ΡΠΊΡ';
ΠΈΠΌΠΏΠΎΡΡΠΈΡΠΎΠ²Π°ΡΡ { saveDraft } ΠΈΠ· '../actions/index';
ΠΈΠΌΠΏΠΎΡΡΠΈΡΠΎΠ²Π°ΡΡ {bindActionCreators} ΠΈΠ· Β«ΡΠ΅Π΄ΡΠΊΡΠΈΠΈΒ»;
ΠΈΠΌΠΏΠΎΡΡΠΈΡΠΎΠ²Π°ΡΡ {Field, reduxForm} ΠΈΠ· 'redux-form';
ΠΈΠΌΠΏΠΎΡΡΠΈΡΠΎΠ²Π°ΡΡ ReduxAce ΠΈΠ· '../components/redux_ace'
const ID = 'id123', NAME = 'name123', SOME_CODE = 'code123';
ΡΡΠ½ΠΊΡΠΈΡ mapStateToProps ({ΡΠ΅ΡΠ½ΠΎΠ²ΠΈΠΊ}) {
Π²ΠΎΠ·Π²ΡΠ°ΡΠ΅Π½ΠΈΠ΅ {
ΡΠ΅ΡΠ½ΠΎΠ²ΠΈΠΊ
};
}
ΡΡΠ½ΠΊΡΠΈΡ mapDispatchToProps (ΠΎΡΠΏΡΠ°Π²ΠΊΠ°) {
Π²Π΅ΡΠ½ΡΡΡ bindActionCreators({
ΡΠΎΡ
ΡΠ°Π½ΠΈΡΡΠ§Π΅ΡΠ½ΠΎΠ²ΠΈΠΊ
}, ΠΎΡΠΏΡΠ°Π²Π»ΡΡΡ)
}
ΠΊΠ»Π°ΡΡ Draft ΡΠ°ΡΡΠΈΡΡΠ΅Ρ ΠΊΠΎΠΌΠΏΠΎΠ½Π΅Π½Ρ {
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>
);
}
}
ΡΠΊΡΠΏΠΎΡΡΠΈΡΠΎΠ²Π°ΡΡ reduxForm ΠΏΠΎ ΡΠΌΠΎΠ»ΡΠ°Π½ΠΈΡ ({
ΠΏΠΎΠ΄ΡΠ²Π΅ΡΠ΄ΠΈΡΡ,
ΡΠΎΡΠΌΠ°: 'Π§Π΅ΡΠ½ΠΎΠ²ΠΈΠΊ'
})(
ΠΏΠΎΠ΄ΠΊΠ»ΡΡΠΈΡΡ (mapStateToProps, mapDispatchToProps) (ΡΠ΅ΡΠ½ΠΎΠ²ΠΈΠΊ)
)`
ΠΏΡΠΎΡΡΠΎ ΠΏΠ΅ΡΠ΅Π΄ ΠΊΠ½ΠΎΠΏΠΊΠΎΠΉ Ρ ΠΏΠΎΡΡΠ°Π²ΠΈΠ» ΠΊΠΎΠΌΠΌΠ΅Π½ΡΠ°ΡΠΈΠΉ ΡΠΎΠ»ΡΠΊΠΎ ΡΠ΅ΠΉΡΠ°Ρ, "//Π΅ΡΠ»ΠΈ Ρ ΠΏΠΎΡΡΠ°Π²Π»Ρ Π΅Π³ΠΎ Π·Π΄Π΅ΡΡ, ΡΠΎ ΠΎΠ½ Π²Π΄ΡΡΠ³ Π½ΠΎΡΠΌΠ°Π»ΡΠ½ΠΎ ΡΠ°Π±ΠΎΡΠ°Π΅Ρ
Π‘ΠΏΠ°ΡΠΈΠ±ΠΎ Π·Π° Π»ΡΠ±ΡΠ΅ ΠΏΠΎΠ΄ΡΠΊΠ°Π·ΠΊΠΈ!