Question

我对React很陌生，我正在努力将我的想法从标准的j转换。

在我的反应组件中，我有以下元素：

<div className='base-state' onClick={this.handleClick}>click here</div>

我正在寻找的行为是在点击时添加一个额外的类。我的第一个想法是尝试在点击处理函数中添加类，例如。

handleClick : function(e) {
   <add class "click-state" here>
}

我无法找到任何类似的例子，所以我很确定我没有以正确的方式考虑这个问题。

有人能指出我正确的方向吗？

Answer 1

类的列表可以从组件的状态派生。例如：

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

  handleClick: function() {
    this.setState({clicked: true});
  },

  render: function() {
    var className = this.state.clicked ? 'click-state' : 'base-state';
    return <div className={className} onClick={this.handleClick}>click here</div>;
  }
});

调用this.setState将触发重新呈现该组件。

Answer 2

~~将ref属性添加到div：~~

课堂上的
：

String columnName=null; for (java.lang.reflect.Field field: row1.getClass().getDeclaredFields()) { columnName=field.getName().toLowerCase(); System.out.println(columnName); }

在渲染中：

$("#selector option:selected").text();

然后在handleClick方法中通过ref获取元素并使用JavaScript classList属性：

myRef = React.createRef();

<击> https://reactjs.org/docs/refs-and-the-dom.html

您只能使用vanilla JS：event.target和classList

<div ref={this.myRef} className="base-state" onClick={this.handleClick}>click here</div>

https://developer.mozilla.org/en-US/docs/Web/API/Event/target

https://developer.mozilla.org/en-US/docs/Web/API/Element/classList

Answer 3

上述每个解决方案都是关于在点击时设置 className='click-state'，但如果双击时已经存在，则不会删除类。如果有人正在使用功能组件，则可以通过使用 useState 钩子和一些条件语句来实现此行为。

const [clicked, setClicked] = useState('');

const handleClick = () => {
  clicked ? setClicked('') : setClicked('base-state click-state');
};

<div className={clicked || 'base-state' } onClick={handleClick}>click here</div>

Answer 4

您可以在点击处理函数中设置点击状态，并使用它来使用模板文字有条件地设置类名。

如果您使用的是函数组件，则可以使用 useState 钩子以这种方式进行操作：

const [clicked, setClicked] = useState(false);

<div className={`base-state ${clicked && click-state}` onClick={() => setClicked(true)}>click here</div>

Answer 5

让我们有一个 div 块：

<div id={props.id} key={props.id} 
    onMouseEnter={() => onMouseEnter(props.id)}
    onMouseLeave={() => onMouseLeave(props.id) } 
    className="other fixed classes"
</div>

要在不影响旧类的情况下添加和删除新类，我们可以使用 onMouseEnter/ onMouseLeave 事件或其他类似点击事件：

   const onMouseEnter = (id) => {
    let element = document.getElementById(id)
    ReactDOM.findDOMNode(element).classList.add("myNewClass") 
   }

   const onMouseLeave = (id) => {
    let element = document.getElementById(id)
    ReactDOM.findDOMNode(element).classList.remove("myNewClass")
   }

如何在ReactJS中的事件上添加或删除className

5 个答案: