onFocus 和 onBlur 不会在反应中呈现答案

【问题标题】：onFocus and onBlur does not render in reactonFocus 和 onBlur 不会在反应中呈现
【发布时间】：2015-09-23 16:19:59
【问题描述】：

我有以下代码

<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 上的检查元素时。它不会显示onFocus 和onBlur。

P/S：即使onClick 似乎也有同样的问题

【问题讨论】：

你的组件在状态改变之前不会渲染...
它是第一次渲染，但之后您需要通过更改状态来触发渲染facebook.github.io/react/docs/component-specs.html
你是比尔盖茨吗？ @盖茨

标签： javascript reactjs dom-events

【解决方案1】：

这是你要找的吗？

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

【讨论】：