Question

<CodeEditor mode='python'
            width='100%'
            height='600px'
            value={'var x = 2;'}
            onBlur={(e, code) => this.onBlur(e, code)}/>

OnBlur功能

onBlur(e, code) {
    console.log(code);
    console.log(e.target.value);
  }

e.target.value是＆＃39; ＆＃39;即使在编辑器中编写代码之后有没有办法在onBlur中获取代码？不使用onChange ???

Answer 1

您可以在onBlur事件上获得react-ace-editor值，如下所示：

onBlur(e, code) {
  const data = code.getValue();
  console.log('Editor Data: ',data);
}

我希望它能对您有所帮助。

Answer 2

ReactAce似乎没有提供编辑器的值，e.target是ace使用的伪文本区域，它是空的，所以你需要一种方法来获取ace实例。

这样的事情：

render = function() {
    var options = {};
    var reactAce; 
    return <div>          
        <ReactAce 
            style={{ height: '400px' }}
            ref={
                instance => { 
                    // store the ref to reactAce
                    reactAce = instance;
                }

            } 
            onBlur={
                (e)  =>  {
                    // get value of the editor
                    console.log(reactAce.editor.getValue());
                }
            }
          />
    </div>;
}

react-ace编辑器的onBlur事件没有返回值

2 个答案: