React：外部のOnChangeイベントを読み取る方法

Question

reactの外部テキスト変更イベントを読み取る方法。

GrammarlyとAuto Text Expanderのような拡張子は、textarea内のテキストを更新しますが、変更後にonChangeイベントまたはonInputイベントは発生しません。その結果、状態は更新されず、条件は矛盾します（テキストエリアとコンポーネントの状態の異なる値）。 1つの方法は、提出時にDOM値を読み取ることですが、これは私のシナリオにとっては完璧な解決策ではありません。他のアクションはテキストエリアの現在の値に依存します。良い解決策はありますか？

PS：一般的な解決策を求めています。拡張コードを変更することは選択肢ではありません。

Answer 1

jQuery入力プラグインを使用するときにこの種の問題が発生する可能性があり、プラグインは.propメソッドの代わりに.attrメソッドを使用して、onChangeイベントをトリガーします。この場合、プラグインが提供するコールバックハンドラに依存する必要があります。

このようなコールバックハンドラはありません。 （コードが利用できるかどうかをチェックすることは決して痛いことはありません）次に、唯一のオプションはポーリングと思われますが、これは醜いですが必然です。

Answer 2

内のすべてまたは特定のテキストエリアのonchangeイベントリスナーを追加できます（実装についてはスニペットを参照）。 React内の状態が更新されます。このスニペットはコメントでうまく対応しています。それはあなたを助けるはずです！

class KeyTrace extends React.Component { 
 
    constructor(props) { 
 
    super(props) 
 
    this.setValueToState = this.setValueToState.bind(this) 
 
    this.state = {} //initial state 
 
    } 
 
    setValueToState(e) { 
 
    this.setState({ 
 
    [e.target.id]: e.target.value //set the new value in the state as {[id]: [value]} pair 
 
    }) 
 
    } 
 
    componentDidMount() { 
 
    const textareas = document.querySelectorAll('textarea') //finds all textarea in the DOM 
 
    const textareasArray = [...textareas] //convert the HTML Collection into array 
 
    textareasArray.forEach((el) => { //loop through the array 
 
     if (el.id === 'update') //add onchange listener for specific textareas (optional) 
 
     el.onchange = this.setValueToState //add a event listener 
 
    }) 
 

 
    } 
 
    render(){ 
 
    console.log(this.state) 
 
    return false 
 
    } 
 
} 
 

 
ReactDOM.render(<KeyTrace/>, document.getElementById('react'))

<script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.1.0/react.min.js"></script> 
 
<script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.1.0/react-dom.min.js"></script> 
 
<div id="non-react"> 
 
    Changes will be stored in react state 
 
    <br/> 
 
    <textarea id="update"></textarea> 
 
    <br/>Changes will not be stored in react state 
 
    <br/> 
 
    <textarea id="wont-update"></textarea> 
 
    <br/> 
 
</div> 
 
<div id="react"></div>

PS。あなたはblur（テキストエリアの外側をクリックしてください）onchangeイベントを発生させるテキストエリアが必要です。それ以外の場合はonchangeの代わりにonkeypressを使用できます。

Answer 3

この種のシナリオを念頭に置いて書かれていませんが、おそらくhttps://github.com/erikras/react-native-listenerがあなたの望みを達成するのに役立ちますか？