web-dev-qa-db-ja.com

onFocusとonBlurは反応してレンダリングされません

私は次のコードを持っています

<ElementsBasket name='nextActionDate' 
                      data={this.props.newLead.get('actions').get('nextActionDate')}>
                <div className="form-group">
                <span className="glyphicon glyphicon-calendar">Calendar </span>
                <span className="glyphicon glyphicon-triangle-bottom" ></span>

                  <input type="text" className="form-control" onFocus={this.type='date'} onBlur={this.type='text'}
                       placeholder="Enter your date here." 
                       value={this.props.newLead.get('actions').get('nextActionDate')}
                       onChange={onFieldChanged.bind(this, 'actions.nextActionDate')}
                       />       
                </div>
              </ElementsBasket>

入力タグでは、デフォルトで入力フィールドにプレースホルダーテキストを表示しようとしています。クリックすると、タイプが日付として変更されます。そして問題は、クロムの要素を検査をクリックしたときにあるようです。 onFocusとonBlurは表示されません。

Ps：onClickでも同じ問題があるようです

reactjsjavascript-events
26
gates

これはあなたが探しているものですか？

http://codepen.io/comakai/pen/WvzRKp?editors=001

var Foo = React.createClass({
  getInitialState: function () {

    return {
      type: 'text'
    };
  },
  onFocus: function () {

    this.setState({
      type: 'date'
    });
  },
  onBlur: function () {

    this.setState({
      type: 'text'
    });
  },
  render: function () {

    return(
      <input 
        type={ this.state.type } 
        onFocus={ this.onFocus } 
        onBlur={ this.onBlur } 
        placeholder="Enter your date here."
      />
    )
  }
});

React.render(<Foo/>, document.body);

上記でコメントしたように、renderメソッドは最初にトリガーされ、その後状態が変化するたびにトリガーされます（shouldComponentRenderが実装されている場合はtrueを返します）。

https://facebook.github.io/react/docs/component-specs.html

30
coma