React-ace: НСвозмоТно ΠΏΠΎΠ»ΡƒΡ‡ΠΈΡ‚ΡŒ ΠΎΠΆΠΈΠ΄Π°Π΅ΠΌΡƒΡŽ Ρ†Π΅Π½Π½ΠΎΡΡ‚ΡŒ ΠΏΡ€ΠΈ использовании диспСтчСризации Redux

Π‘ΠΎΠ·Π΄Π°Π½Π½Ρ‹ΠΉ Π½Π° 10 янв. 2016  Β·  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 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>
);

ВсС 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)

Π’ΠΎ Π²Ρ‚ΠΎΡ€ΠΎΠΌ ΠΏΡ€ΠΈΠΌΠ΅Ρ€Π΅ Ρƒ вас Π½Π΅Ρ‚ Ρ€Π΅Π°Π»ΠΈΠ·Π°Ρ†ΠΈΠΈ Ρ„ΡƒΠ½ΠΊΡ†ΠΈΠΉ 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>
);
Π‘Ρ‹Π»Π° Π»ΠΈ эта страница ΠΏΠΎΠ»Π΅Π·Π½ΠΎΠΉ?
0 / 5 - 0 Ρ€Π΅ΠΉΡ‚ΠΈΠ½Π³ΠΈ