Question

下面是我的form.jsx文件

var React = require('react');
var Input = require('./input');

module.exports = React.createClass({
    getInitialState: function() {
        return {
            focus: false
        }
    },
    render: function () {
        return <div className="info_input">
            <div className="demo demo2 lll">
                  <div className={"css " + (this.state.focus ? "active" : "")}>
                    <label htmlFor="d3">{this.props.firstCol}</label>
                    <Input id="d3" type="text" handleFocus={this.addClass} handleBlur={this.removeClass} />
                  </div>
            </div>
                <div className="demo demo2">
                  <div className={"css " + (this.state.focus ? "active" : "")}>
                    <label htmlFor="d3">{this.props.secondCol}</label>
                    <Input id="d3" type="text" />
                  </div>
                </div>
                <div className="clear"></div>
        </div>
    },
    addClass: function () {
            this.setState({
            focus: true
        });
    },
    removeClass: function () {
        this.setState({
            focus: false
        });
    }
});

这是我的输入组件.jsx文件

var React = require('react');

module.exports = React.createClass({
    getInitialState: function () {
        return {
            focus: false
        }
    },
    render: function() {
        return <input id={this.props.id} 
                      type={this.props.type} 
                      onFocus={this.props.handleFocus} 
                      onBlur={this.props.handleBlur} 
                      autofocus={this.state.focus} />
    }
});

如果我专注于输入字段，它会添加＆＃34; active＆＃34; className为其父div。但是，所有输入字段也将被添加＆＃34;活动＆＃34;类。

如何才能将类添加到聚焦输入的父div而不是全部。

Answer 1

一个解决方案是将id值传递给addClass函数并使用此Id以及焦点检查来确定该类是否应该更改。

module.exports = React.createClass({
getInitialState: function () {
    return {
        focus: false
    }
},
render: function() {
    return <input id={this.props.id} 
                  type={this.props.type} 
                  onFocus={this.props.handleFocus.bind( null, this.props.id} 
                  onBlur={this.props.handleBlur} 
                  autofocus={this.state.focus} />
}
});

另一种解决方案是分离您的组件。

module.exports = React.createClass({

 addClass: function () {
        this.setState({
        focus: true
    });
 }
 getInitialState: function () {
    return {
        focus: false
    }
 },
 render: function() {
    return (
       <div className={"css " + (this.state.focus ? "active" : "")}>
         <label htmlFor="d3">{this.props.firstCol}</label>
         <Input id="d3" type="text" handleFocus={this.addClass} handleBlur={this.removeClass} />
       </div>
   );
  }
 });

module.exports = React.createClass({
   render: function () {
     <div className="demo demo2 lll">
       <InputContainer />
     </div>
     <div className="demo demo2">
       <InputContainer />
     </div>
     <div className="clear"></div>
  }
 });

Answer 2

由于你有一些简单的逻辑（在聚焦时添加类），最好将它包装到一个组件中并将此逻辑包装到其中。

所以，我做了一个简单的例子：

https://jsfiddle.net/hLuv0c65/1/

它基本上创建了一个Input组件，如果输入被聚焦，则将input--focused添加到父div：

var Input = React.createClass({
    getInitialState: function() {
      return {
        isFocused: false
      };
    },

    onFocus: function() {
      this.setState({
        isFocused: true
      });
    },

    onBlur: function() {
      this.setState({
        isFocused: false
      });
    },

    render: function() {
      var classes = [];

      if(this.state.isFocused) {
        classes.push('input--focused');
      }

      return (
        <div className={classes.join(' ')}>
          <input
            type="text"
            onFocus={this.onFocus}
            onBlur={this.onBlur} />
        </div>
      );
    }
});

希望它有所帮助！

如何动态地将类添加到焦点输入字段的父div？

2 个答案: