在onChange
函数中使用dispatch
函数时,不会得到期望值。
this.editor.value
为空,所以这里什么也没有。
版本: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>
);
}
}
@元野
在你的第一个例子中
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
,和它的作品。
如果不这样做,它将在调用 'insert' 后调用 'delete' 操作。 您可以通过componentWillReceiveProps
函数中的 console.log(nextProps) 找到它。
当然,dispatch 会默认作为 props 传递。
我不明白这个。 delete
和insert
操作在哪里?
@chentsulin我将ace.jsx
复制到我自己的项目中,并在 ReactAce.componentWillReceiveProps 中复制了 console.log(nextProps)。
有人在看吗?
这对我来说仍然是一个问题
就我而言,将状态值设置为value
选项。
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
选项。