更改元素的类名答案

【问题标题】：changing class name of an element更改元素的类名
【发布时间】：2019-07-17 02:35:10
【问题描述】：

我正在尝试动态更改元素的类名但未成功。这是我的尝试

this.state = {
   element: [<div className="changeMe"></div>]     
}

changeClassName(){
    let tmp = this.state.element[0]

    tmp.className="new class name"


   this.setState({element[0]: tmp})
}

render(){
   return(

    <Button onClick={this.changeClassName()}>Change the class name</Button>
   )
}

有什么建议吗？

【问题讨论】：

ReactJS add dynamic class to manual class names的可能重复

标签： javascript reactjs

【解决方案1】：

除了将 JSX 存储在您的状态中，您还可以拥有一个包含您在渲染方法中使用的 className 字符串的状态变量。然后changeClassName 将负责更改此字符串的状态。

示例

class App extends React.Component {
  state = {
    className: "changeMe"
  };

  changeClassName = () => {
    this.setState(prevState => ({
      className: prevState.className === "changeMe" ? "newClassName" : "changeMe"
    }));
  };

  render() {
    const { className } = this.state;

    return (
      <div className={className}>
        <button onClick={this.changeClassName}>
          Change the class name ({className})
        </button>
      </div>
    );
  }
}

ReactDOM.render(<App />, document.getElementById("root"));

<script src="https://cdnjs.cloudflare.com/ajax/libs/react/16.6.3/umd/react.production.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react-dom/16.6.3/umd/react-dom.production.min.js"></script>

<div id="root"></div>

【讨论】：

解决方案是使命element: [<div className="changeMe"></div>]
我需要更改元素中找到的 div 的类名
@toymoy 将 React 元素 (JSX) 直接存储在状态中通常不是一个好主意。最好将数据存储在 state 中并从 render 方法中派生 JSX。你没有办法像那样构建你的应用程序吗？

【解决方案2】：

假设您使用的是最新版本的 React，请查看以下解决方案：

https://codesandbox.io/s/5kkwqvvopk?codemirror=1&fontsize=14

编辑：如果你没有使用最新版本的 react，并且不能使用钩子，请确保你的 react 组件是一个类，并使用 this.setState 来存储你想要的类名。

【讨论】：

【解决方案3】：

这里有很多问题。

1) 您会立即在 onClick 中调用您的函数。这将被评估 - 您需要确保传递给 onClick 的是函数，而不是函数的调用。

2) changeClass 名称不会绑定到该类的实例。当您最终通过单击按钮调用它时，this 不会是您所期望的，所以setState不太可能工作。如果你使用 create-react-app，你可以使用类似语法的箭头函数来解决这个问题。

3) 您不能像这样更改 JSX 元素的 className - 您最好使用 Javascript 插入它以供转译器处理。

这是一个可能的解决方案：

state = {
 className: "changeMe"
};

changeClassName = (newName) => {
  this.setState({
    className: newName
  });
};

render() {
  const { className } = this.state;

  return (
    <div className={className}>
      <button onClick={() => this.changeClassName('whatever you want')}>
        Use whatever variable in the arg above you like. Notice how I have passed in anonymous func, which will invoke my method for me.
      </button>
    </div>
 );
}

【讨论】：