React-ace: Redux рдХреЗ рдкреНрд░реЗрд╖рдг рдХрд╛ рдЙрдкрдпреЛрдЧ рдХрд░рддреЗ рд╕рдордп рдЕрдкреЗрдХреНрд╖рд┐рдд рдореВрд▓реНрдп рдирд╣реАрдВ рдорд┐рд▓ рд╕рдХрддрд╛ рд╣реИ

рдХреЛ рдирд┐рд░реНрдорд┐рдд 10 рдЬрдире░ 2016  ┬╖  7рдЯрд┐рдкреНрдкрдгрд┐рдпрд╛рдБ  ┬╖  рд╕реНрд░реЛрдд: securingsincity/react-ace

dispatch рдлрд╝рдВрдХреНрд╢рди рдореЗрдВ onChange рдлрд╝рдВрдХреНрд╢рди рдХрд╛ рдЙрдкрдпреЛрдЧ рдХрд░рддреЗ рд╕рдордп, рдЕрдкреЗрдХреНрд╖рд┐рдд рдорд╛рди рдирд╣реАрдВ рдорд┐рд▓реЗрдЧрд╛ред

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>
    );
  }
}
picture Yuanye

рд╕рдмрд╕реЗ рдЙрдкрдпреЛрдЧреА рдЯрд┐рдкреНрдкрдгреА

рдореЗрд░реЗ рдорд╛рдорд▓реЗ рдореЗрдВ, рд░рд╛рдЬреНрдп рдореВрд▓реНрдп рдХреЛ 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>
);
picture romiogaku 3 рдирд╡ре░ 2016
👍2 ❤1 🎉1 😄1

рд╕рднреА 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 picture Yuanye 10 рдЬрдире░ 2016

@рдпреБрдЖрдирдпреЗ

рдЖрдкрдХреЗ рдкрд╣рд▓реЗ рдЙрджрд╛рд╣рд░рдг рдореЗрдВ

connect(
  mapDispatchToProps
)(Editor)

рд╣реЛрдирд╛ рдЪрд╛рд╣рд┐рдП

connect(
  null,
  mapDispatchToProps
)(Editor)

рдЖрдкрдХреЗ рджреВрд╕рд░реЗ рдЙрджрд╛рд╣рд░рдг рдореЗрдВ, рдЖрдкрдХреЗ рдкрд╛рд╕ mapStateToProps рдФрд░ mapDispatchToProps рдлрд╝рдВрдХреНрд╢рди рд▓рд╛рдЧреВ рдирд╣реАрдВ рд╣реИред

chentsulin picture chentsulin 12 рдЬрдире░ 2016

@chentsulin

рджреВрд╕рд░реЗ рдЙрджрд╛рд╣рд░рдг рдореЗрдВ 'mapDispatchToProps' рдХреА рдЖрд╡рд╢реНрдпрдХрддрд╛ рдирд╣реАрдВ рд╣реИред

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

рдореИрдВ componentWillReceiveProps рдлрд╝рдВрдХреНрд╢рди рдХреЛ https://github.com/securingsincity/react-ace/blob/master/src/ace.jsx рд╣рдЯрд╛ рджреЗрддрд╛ рд╣реВрдВ, рдФрд░ рдпрд╣ рдХрд╛рдо рдХрд░рддрд╛ рд╣реИред

рдпрджрд┐ рдирд╣реАрдВ, рддреЛ рдпрд╣ 'рдЗрдиреНрд╕рд░реНрдЯ' рдХреЙрд▓ рдХреЗ рдмрд╛рдж 'рдбрд┐рд▓реАрдЯ' рдПрдХреНрд╢рди рдХреЛ рдХреЙрд▓ рдХрд░реЗрдЧрд╛ред рдЖрдк рдЗрд╕реЗ componentWillReceiveProps рдлрд╝рдВрдХреНрд╢рди рдореЗрдВ console.log(nextProps) рджреНрд╡рд╛рд░рд╛ рдвреВрдВрдв рд╕рдХрддреЗ рд╣реИрдВред

Yuanye picture Yuanye 12 рдЬрдире░ 2016

рдирд┐рд╢реНрдЪрд┐рдд рд░реВрдк рд╕реЗ, рдбрд┐рд╕реНрдкреИрдЪ рдХреЛ рдкреНрд░реЙрдкреНрд╕ рдХреЗ рд░реВрдк рдореЗрдВ рдбрд┐рдлрд╝реЙрд▓реНрдЯ рд░реВрдк рд╕реЗ рдкрд╛рд░рд┐рдд рдХрд┐рдпрд╛ рдЬрд╛рдПрдЧрд╛ред

рдореИрдВ рдпрд╣ рдирд╣реАрдВ рдкрдХрдбрд╝рддрд╛ред delete рдФрд░ insert рдХреНрд░рд┐рдпрд╛рдПрдБ рдХрд╣рд╛рдБ рд╣реИрдВ?

chentsulin picture chentsulin 12 рдЬрдире░ 2016

@chentsulin рдореИрдВрдиреЗ рдЕрдкрдиреЗ рд╕реНрд╡рдпрдВ рдХреЗ рдкреНрд░реЛрдЬреЗрдХреНрдЯ рдореЗрдВ ace.jsx рдкреНрд░рддрд┐рд▓рд┐рдкрд┐ рдмрдирд╛рдИ, рдФрд░ ReactAce.componentWillReceiveProps рдореЗрдВ console.log(nextProps)ред

Yuanye picture Yuanye 12 рдЬрдире░ 2016

рдХреНрдпрд╛ рдХреЛрдИ рдЗрд╕реЗ рджреЗрдЦ рд░рд╣рд╛ рд╣реИ?
рдпрд╣ рдЕрднреА рднреА рдореЗрд░реЗ рд▓рд┐рдП рдПрдХ рдореБрджреНрджрд╛ рд╣реИ

venil7 picture venil7 28 рдЬреВрди 2016

рдореЗрд░реЗ рдорд╛рдорд▓реЗ рдореЗрдВ, рд░рд╛рдЬреНрдп рдореВрд▓реНрдп рдХреЛ 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>
);
romiogaku picture romiogaku 3 рдирд╡ре░ 2016
👍2 ❤1 🎉1 😄1
рдХреНрдпрд╛ рдпрд╣ рдкреГрд╖реНрда рдЙрдкрдпреЛрдЧреА рдерд╛?
0 / 5 - 0 рд░реЗрдЯрд┐рдВрдЧреНрд╕

рд╕рдВрдмрдВрдзрд┐рдд рдореБрджреНрджреЛрдВ

Jarmahent picture Jarmahent  ┬╖  3рдЯрд┐рдкреНрдкрдгрд┐рдпрд╛рдБ
henviso picture henviso  ┬╖  7рдЯрд┐рдкреНрдкрдгрд┐рдпрд╛рдБ
kolbinski picture kolbinski  ┬╖  5рдЯрд┐рдкреНрдкрдгрд┐рдпрд╛рдБ
avalkowsky picture avalkowsky  ┬╖  6рдЯрд┐рдкреНрдкрдгрд┐рдпрд╛рдБ
Bobcui001 picture Bobcui001  ┬╖  5рдЯрд┐рдкреНрдкрдгрд┐рдпрд╛рдБ