ΠΡΠΈ ΠΈΡΠΏΠΎΠ»ΡΠ·ΠΎΠ²Π°Π½ΠΈΠΈ ΡΡΠ½ΠΊΡΠΈΠΈ dispatch
ΡΡΠ½ΠΊΡΠΈΠΈ onChange
ΠΎΠΆΠΈΠ΄Π°Π΅ΠΌΠΎΠ³ΠΎ Π·Π½Π°ΡΠ΅Π½ΠΈΡ Π½Π΅ Π±ΡΠ΄Π΅Ρ.
this.editor.value
ΠΈΠΌΠ΅Π΅Ρ Π·Π½Π°ΡΠ΅Π½ΠΈΠ΅ null, ΡΠ°ΠΊ ΡΡΠΎ Π·Π΄Π΅ΡΡ Π½ΠΈΡΠ΅Π³ΠΎ Π½Π΅ ΠΏΠΎΠ»ΡΡΠΈΡΠ΅.
ΠΠ΅ΡΡΠΈΡ: 3.0.0
ΠΠΎΡ Π΄Π΅ΠΌΠΎ:
import React from 'react';
import { bindActionCreators } from 'redux';
import { connect } from 'react-redux';
import brace from 'brace';
import AceEditor from 'react-ace';
import 'brace/mode/sql';
import 'brace/mode/python';
import 'brace/theme/github';
// ActionCreators
export function onChangeAction(value) {
// use `console.log(value)` will not get the right expect value, an input print a letter.
return {
type: 'ON_CHANGE',
text: value,
}
};
// Editor Component
class Editor extends React.Component {
constructor(props) {
super(props);
};
render() {
const { onChange } = this.props;
return (
<AceEditor
mode="sql"
theme="github"
onChange={onChange}
name="UNIQUE_ID_OF_DIV"
width='100%'
ref='editor'
fontSize={15}
editorProps={{$blockScrolling: true}}
/>
);
}
}
function mapDispatchToProps(dispatch) {
return {onChange: bindActionCreators(onChangeAction, dispatch)};
};
connect(
mapDispatchToProps
)(Editor)
// App
import { Provider } from 'react-redux';
class App extends React.Component {
render() {
const { store } = this.props;
return (
<Provider store={store}>
<Editor />
</Provider>
);
}
}
Π’Π°ΠΊ Π½Π΅ ΡΠ°Π±ΠΎΡΠ°Π΅Ρ:
import React from 'react';
import { bindActionCreators } from 'redux';
import { connect } from 'react-redux';
import brace from 'brace';
import AceEditor from 'react-ace';
import 'brace/mode/sql';
import 'brace/mode/python';
import 'brace/theme/github';
// `onChangeAction` from ActionCreators
export function onChangeAction(text) {
return {
type: 'ON_CHANGE',
statement: text,
}
};
class Editor extends React.Component {
constructor(props) {
super(props);
};
onChange = (value) => {
console.log(value);
const { dispatch } = this.props;
dispatch(onChangeAction(value));
};
render() {
return (
<AceEditor
mode="sql"
theme="github"
onChange={this.onChange}
name="UNIQUE_ID_OF_DIV"
width='100%'
ref='editor'
fontSize={15}
editorProps={{$blockScrolling: true}}
/>
);
}
}
connect(
mapStateToProps,
mapDispatchToProps
)(Editor)
class App extends React.Component {
render() {
const { store } = this.props;
return (
<Provider store={store}>
<Editor />
</Provider>
);
}
}
@Yuanye
Π Π²Π°ΡΠ΅ΠΌ ΠΏΠ΅ΡΠ²ΠΎΠΌ ΠΏΡΠΈΠΌΠ΅ΡΠ΅
connect(
mapDispatchToProps
)(Editor)
Π΄ΠΎΠ»ΠΆΠ½ΠΎ Π±ΡΡΡ
connect(
null,
mapDispatchToProps
)(Editor)
ΠΠΎ Π²ΡΠΎΡΠΎΠΌ ΠΏΡΠΈΠΌΠ΅ΡΠ΅ Ρ Π²Π°Ρ Π½Π΅Ρ ΡΠ΅Π°Π»ΠΈΠ·Π°ΡΠΈΠΈ ΡΡΠ½ΠΊΡΠΈΠΉ mapStateToProps ΠΈ mapDispatchToProps.
@chentsulin
ΠΠ΅ ΡΡΠ΅Π±ΡΠ΅Ρ 'mapDispatchToProps' Π²ΠΎ Π²ΡΠΎΡΠΎΠΌ ΠΏΡΠΈΠΌΠ΅ΡΠ΅.
const mapStateToProps = (state) => {
return {
query: getQuery(state),
}
};
Π― ΡΠ΄Π°Π»ΡΡ ΡΡΠ½ΠΊΡΠΈΡ componentWillReceiveProps
Π² https://github.com/securingsincity/react-ace/blob/master/src/ace.jsx
, ΠΈ ΠΎΠ½Π° ΡΠ°Π±ΠΎΡΠ°Π΅Ρ.
Π ΠΏΡΠΎΡΠΈΠ²Π½ΠΎΠΌ ΡΠ»ΡΡΠ°Π΅ ΠΎΠ½ Π²ΡΠ·ΠΎΠ²Π΅Ρ Π΄Π΅ΠΉΡΡΠ²ΠΈΠ΅ Β«ΡΠ΄Π°Π»ΠΈΡΡΒ» ΠΏΠΎΡΠ»Π΅ Π²ΡΠ·ΠΎΠ²Π° Β«Π²ΡΡΠ°Π²ΠΈΡΡΒ». ΠΡ ΠΌΠΎΠΆΠ΅ΡΠ΅ Π½Π°ΠΉΡΠΈ Π΅Π³ΠΎ Π² console.log (nextProps) Π² ΡΡΠ½ΠΊΡΠΈΠΈ componentWillReceiveProps
.
ΠΠΎΠ½Π΅ΡΠ½ΠΎ, ΠΏΠΎ ΡΠΌΠΎΠ»ΡΠ°Π½ΠΈΡ ΠΎΡΠΏΡΠ°Π²ΠΊΠ° Π±ΡΠ΄Π΅Ρ ΠΏΠ΅ΡΠ΅Π΄Π°Π²Π°ΡΡΡΡ ΠΊΠ°ΠΊ ΡΠ΅ΠΊΠ²ΠΈΠ·ΠΈΡ.
Π― ΡΡΠΎΠ³ΠΎ Π½Π΅ ΡΠ»Π°Π²Π»ΠΈΠ²Π°Ρ. ΠΠ΄Π΅ Π΄Π΅ΠΉΡΡΠ²ΠΈΡ delete
ΠΈ insert
?
@chentsulin Π― ΡΠΊΠΎΠΏΠΈΡΠΎΠ²Π°Π» ace.jsx
Π² ΡΠ²ΠΎΠΉ ΠΏΡΠΎΠ΅ΠΊΡ, Π° console.log (nextProps) - Π² ReactAce.componentWillReceiveProps.
ΠΊΡΠΎ-Π½ΠΈΠ±ΡΠ΄Ρ ΡΠΌΠΎΡΡΠΈΡ Π½Π° ΡΡΠΎ?
ΡΡΠΎ Π²ΡΠ΅ Π΅ΡΠ΅ ΠΏΡΠΎΠ±Π»Π΅ΠΌΠ° Π΄Π»Ρ ΠΌΠ΅Π½Ρ
Π ΠΌΠΎΠ΅ΠΌ ΡΠ»ΡΡΠ°Π΅ ΡΡΡΠ°Π½ΠΎΠ²ΠΈΡΠ΅ Π·Π½Π°ΡΠ΅Π½ΠΈΠ΅ ΡΠΎΡΡΠΎΡΠ½ΠΈΡ Π² value
option.
const TextArea = (props) => (
<div className={styles.box}>
<AceEditor
mode="javascript"
theme="solarized_light"
onChange={props.onChange}
name="RIGHT_INPUT"
width="100%"
height="100%"
value={props.value}
showPrintMargin={false}
editorProps={{ $blockScrolling: true }}
/>
</div>
);
Π‘Π°ΠΌΡΠΉ ΠΏΠΎΠ»Π΅Π·Π½ΡΠΉ ΠΊΠΎΠΌΠΌΠ΅Π½ΡΠ°ΡΠΈΠΉ
Π ΠΌΠΎΠ΅ΠΌ ΡΠ»ΡΡΠ°Π΅ ΡΡΡΠ°Π½ΠΎΠ²ΠΈΡΠ΅ Π·Π½Π°ΡΠ΅Π½ΠΈΠ΅ ΡΠΎΡΡΠΎΡΠ½ΠΈΡ Π²
value
option.