Giter VIP home page Giter VIP logo

Comments (7)

 avatar commented on September 26, 2024 5

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>
);

from react-ace.

Yuanye avatar Yuanye commented on September 26, 2024

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

from react-ace.

chentsulin avatar chentsulin commented on September 26, 2024

@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.

from react-ace.

Yuanye avatar Yuanye commented on September 26, 2024

@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.

from react-ace.

chentsulin avatar chentsulin commented on September 26, 2024

Sure, dispatch will be passed down as props as default.

I don't catch this. Where is the delete and insert actions?

from react-ace.

Yuanye avatar Yuanye commented on September 26, 2024

@chentsulin I copied ace.jsx to my own project, and console.log(nextProps) in ReactAce.componentWillReceiveProps.

from react-ace.

venil7 avatar venil7 commented on September 26, 2024

is somebody looking at it?
this is still an issue for me

from react-ace.

Related Issues (20)

Recommend Projects

  • React photo React

    A declarative, efficient, and flexible JavaScript library for building user interfaces.

  • Vue.js photo Vue.js

    🖖 Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.

  • Typescript photo Typescript

    TypeScript is a superset of JavaScript that compiles to clean JavaScript output.

  • TensorFlow photo TensorFlow

    An Open Source Machine Learning Framework for Everyone

  • Django photo Django

    The Web framework for perfectionists with deadlines.

  • D3 photo D3

    Bring data to life with SVG, Canvas and HTML. 📊📈🎉

Recommend Topics

  • javascript

    JavaScript (JS) is a lightweight interpreted programming language with first-class functions.

  • web

    Some thing interesting about web. New door for the world.

  • server

    A server is a program made to process requests and deliver data to clients.

  • Machine learning

    Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.

  • Game

    Some thing interesting about game, make everyone happy.

Recommend Org

  • Facebook photo Facebook

    We are working to build community through open source technology. NB: members must have two-factor auth.

  • Microsoft photo Microsoft

    Open source projects and samples from Microsoft.

  • Google photo Google

    Google ❤️ Open Source for everyone.

  • D3 photo D3

    Data-Driven Documents codes.