When using dispatch
function in onChange
function, will not get the expect value.
this.editor.value
is null, so get nothing here.
Version: 3.0.0
Here is the demo:
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>
);
}
}
Doesn't work in this way:
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
In your first example
connect(
mapDispatchToProps
)(Editor)
should be
connect(
null,
mapDispatchToProps
)(Editor)
In your second example, you don't have a mapStateToProps and mapDispatchToProps function implement.
@chentsulin
Does not need 'mapDispatchToProps' in second example.
const mapStateToProps = (state) => {
return {
query: getQuery(state),
}
};
I delete the componentWillReceiveProps
function in https://github.com/securingsincity/react-ace/blob/master/src/ace.jsx
, and it works.
If don't, it will call 'delete' action after call 'insert' . You can find it by console.log(nextProps) in componentWillReceiveProps
function.
Sure, dispatch will be passed down as props as default.
I don't catch this. Where is the delete
and insert
actions?
@chentsulin I copied ace.jsx
to my own project, and console.log(nextProps) in ReactAce.componentWillReceiveProps.
is somebody looking at it?
this is still an issue for me
In my case, set state value to 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>
);
Most helpful comment
In my case, set state value to
value
option.