React-ace: Reduxのディスパッチを使用すると期待値を取得できません

作成日 2016年01月10日  ·  7コメント  ·  ソース: securingsincity/react-ace

使用する場合は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>
    );
  }
}

最も参考になるコメント

私の場合、状態値を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>
);

全てのコメント7件

このようには機能しません:

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)

2番目の例では、mapStateToProps関数とmapDispatchToProps関数を実装していません。

@chentsulin

2番目の例では「mapDispatchToProps」は必要ありません。

const mapStateToProps = (state) => {
  return {
    query: getQuery(state),
  }
};

https://github.com/securingsincity/react-ace/blob/master/src/ace.jsxcomponentWillReceiveProps関数を削除すると、機能します。

そうでない場合は、「挿入」を呼び出した後に「削除」アクションを呼び出します。 これは、console.log(nextProps)のcomponentWillReceiveProps関数で見つけることができます。

確かに、ディスパッチはデフォルトで小道具として渡されます。

聞き取れません。 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>
);
このページは役に立ちましたか?
0 / 5 - 0 評価

関連する問題

danush picture danush  ·  7コメント

tsmirnov picture tsmirnov  ·  4コメント

ponelat picture ponelat  ·  3コメント

BenBrewerBowman picture BenBrewerBowman  ·  5コメント

dmavrin picture dmavrin  ·  3コメント