onFocus 및 onBlur가 반응으로 렌더링되지 않음

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>;

입력 태그에서는 디폴트로 플레이스 홀더 텍스트를 입력 필드에 표시하려고 합니다.클릭하면 날짜로 유형을 변경해 주셨으면 합니다.그리고 Chrome에서 inspect 요소를 클릭했을 때 문제가 있는 것 같습니다.그것은 보이지 않을 것이다onFocus그리고.onBlur.

P/S: 심지어onClick같은 문제를 안고 있는 것 같다

이것이 당신이 찾고 있던 것이에요?

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);

위에서 설명한 바와 같이 렌더 메서드는 상태가 변경될 때마다 처음 및 그 후에 트리거됩니다(또한 구현된 경우 컴포넌트렌더가 true를 반환해야 합니다).

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

언급URL : https://stackoverflow.com/questions/31247214/onfocus-and-onblur-does-not-render-in-react