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

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即使在编辑器中编写代码后也是"。有什么方法可以在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>;
}