redux-form
とともに使用し、 onChange
が「変更」アクションをディスパッチすると、AceEditorが再レンダリングされ、エディターの最後にカーソルが置かれます。変更ができないようにします。
@ venil7 ACEエディターをredux形式で統合できましたか?
まったく同じことをしなければなりません。コードサンプルを提供していただけませんか。
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)
それはそれと同じくらい簡単で、それは素晴らしい働きをします!
私は今、同様の問題を抱えています。
上記のように、Fieldに渡されるコンポーネントとしてredux-form内でreact-aceを使用しています。
エディターがフォーカスを失うと、値は「」に設定され、エースエディター内にドットが表示されます。
私のコードはjschlieberが提案したものと同じです。見てください:
`import React from'react '
'react-ace'からAceEditorをインポートします
import _ from'lodash ';
import'brace / mode / javascript ';
インポート 'ブレース/テーマ/モノカイ';
デフォルト関数のエクスポートReduxAce(props){
console.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}
/>
)
} `
と
`import React、{Component} from'react ';
import {connect} from'react-redux ';
import {saveDraft} from '../ actions / index';
import {bindActionCreators} from'redux ';
import {Field、reduxForm} from'redux-form ';
'../components/redux_ace'からReduxAceをインポートします
const ID = 'id123'、NAME = 'name123'、SOME_CODE = 'code123';
function mapStateToProps({draft}){
戻る {
下書き
};
}
function mapDispatchToProps(dispatch){
bindActionCreators({を返す
下書きを保存
}、 急送)
}
クラスドラフトはコンポーネントを拡張します{
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({
検証、
フォーム: 'DraftForm'
})(
connect(mapStateToProps、mapDispatchToProps)(ドラフト)
) `
ボタンの直前にコメントを入れました。「//ここに置くと、突然正常に動作します。
ヒントをありがとう!