は通知値の変更についてのコンポーネント

Question

が、私はいずれかを変更する責任があるコンポーネントクラスがあると反応し数がテキストにテキストボックスに入力された：

：今、使用量は次のようになります

class NumbersToText extends Component { 

    onChange(event) { 
    const { target } = event; 
    const { value } = target; 

    if (hasNumbers(value)) { 
     target.value = numbersToText(value); 
     // HERE I NEED TO NOTIFY ABOUT CHANGES 
    } 
    } 

    render() { 
    return (
     <span onChange={this.onChange}> 
     {this.props.children} 
     </span> 
    ); 
    } 
} 

<NumbersToText> 
    <input onChange={this.saveValue} 
</NumbersToText> 

すべてが動作し、値がテキストに変更されたとします。

は今 問題は、私は onChangeハンドラをテキストと入力し、その値を割り当てるために番号を変更した後、これ saveValueが更新された値で呼び出されていない、再び実行されていないということです。

onChangeハンドラを新しい値でトリガするには、この問題にどのようにアプローチする必要がありますか？

Answer 1

numbers to textの意味が分かりませんので、入力のonChange関数を呼び出す前に値を変更し、その値を入力に反映させたいと思っています。

まず最初に、React、Reactは内部のvirtualオブジェクトをDOMに反映します。つまり、DOMを直接変更しないでください。代わりに、この内部表現を変更する必要があります（setState、propsを使用）この変更をDOMに反映させます。

Reactには入力と制御されない入力の2種類があります。私はあなたが制御されていない入力に対してこれを使いたいと思うでしょう。私が見ることができる

唯一の可能な解決策は、入力のonChangeコールバックを呼び出す前にaditionalステップを追加することReact.cloneElement機能を使用して入力を変換にあります。

ここでは、入力を大文字にする可能な実装があります。

class UpperCase extends React.Component { 
    constructor(props) { 
     super(props);    
    } 

    onChange(e, input, next) { 
     let value = input.value || ''; 
     value = value.toUpperCase(); 
     input.value = value; 
     next(value); 
    } 

    render() { 
     let childs = React.Children.map(this.props.children, child => { 
     let input = null; //Will take advantage of javascript's closures 
     let onChangeChild = child.props.onChange.bind(child); 
     return React.cloneElement(child, { 
      ref: ref => input = ref, 
      onChange: e => { 
       this.onChange(e, input, onChangeChild) 
      } 
     }); 
     }); 
     return (
     <span> 
      {childs} 
     </span> 
    ); 
    } 
} 

そして、あなたはこのようにそれを使用することができます：私は似て思い付いた@tiagohnglする

<UpperCase> 
    <input onChange={(val) => console.log(val)}></input> 
    <textarea onChange={(val) => console.log(val)}></textarea> 
</UpperCase> 

Answer 2

おかげで、多分少し雑然と（クローニング要素なし）方法：

class NumbersToText extends Component { 

    onChange(event) { 
    const { target } = event; 
    const { value } = target; 

    if (hasNumbers(value)) { 
     target.value = numbersToText(value); 

     this.childrenOnChange(event); 
    } 
    } 

    childrenOnChange(event) { 
    const { children } = this.props; 

    React.Children.forEach(children, child => { 
     if (child.props.onChange) { 
     child.props.onChange(event); 
     } 
    }); 
    } 

    render() { 
    return (
     <span onChange={this.onChange}> 
     {this.props.children} 
     </span> 
    ); 
    } 
} 

Answer 3

export default class NumbersToText extends React.Component { 

constructor(props) { 
    super(props) 
    this.onChange = this.onChange.bind(this); 
} 

componentWillMount() { 
    this.setState({ anyData: [] }); 
} 

onChange(event) { 
    this.setState({anyData: event.target.value}, 
    ()=>{console.log("AnyData: "+this.state.anyData)}); 
    // callback to console.log after setState is done 
} 

render() { 
    return (
     <input type="text" 
      value={this.state.anyData} 
      onChange={this.onChange} /> 
     ); 
    } 
} 

あなたが言及したように、 変更された値の後にonChangeは呼び出されません。

複数の可能性があります。

1. onChangeはバインドされていません。

2. はrenderメソッドをにおける状態変化はありませんので、コンソールの

3. メイク使用を再表示されません。問題を追跡するlog（）

私はわずかに説明のためにコードを用意しています。

希望します。

How react handle State Change (answer I posted before)