相关疑难解决方法(0)

我试图弄清楚如何切换活动类onClick来更改CSS属性.

我采取了很多方法,并阅读了许多SO答案.使用jquery它会相对简单,但是,我无法通过反应来解决这个问题.我的代码如下.任何人都可以建议我该怎么做？

如果不为每个项目创建新组件,是否可以执行此操作？

class Test extends Component(){

    constructor(props) {

    super(props);
    this.addActiveClass= this.addActiveClass.bind(this);

  }

  addActiveClass() {

    //not sure what to do here

  }

    render() {
    <div>
      <div onClick={this.addActiveClass}>
        <p>1</p>
      </div>
      <div onClick={this.addActiveClass}>
        <p>2</p>
      </div>
        <div onClick={this.addActiveClass}>
        <p>3</p>
      </div>
    </div>
  }

}

我是ReactJS的新手.直到现在我正在使用JQuery来设置我需要的任何动画或某些功能.但现在我正在尝试使用ReactJS并使用JQuery进行最小化.

我的案例是:
我正在尝试建立自己的手风琴,使用JQuery我可以做到,但是使用ReactJS我不明白如何做到.

<div class="accor">
   <div class="head">Head 1</div>
   <div class="body hide">Body 1</div>
</div>
<div class="accor">
   <div class="head">Head 1</div>
   <div class="body hide">Body 1</div>
</div>
<div class="accor">
   <div class="head">Head 1</div>
   <div class="body hide">Body 1</div>
</div>

使用JQuery:

$('.accor > .head').on('click', function(){
   $('.accor > .body').slideUp();
   $(this).next().slideDown();
});

我的问题:
1.如何在ReactJS中做到这一点？

谢谢你

在提交表单时,我想显示"Please wait .."并成功提交从服务器返回的数据.使用jQuery,很容易做到.但是应该有一种React方式,因为React不喜欢这种直接的DOM操作 - 我想.1)我是对的吗？2)如何在表单提交后显示消息？

var FormComp = React.createClass({

    handleSubmit:function(){

    var userName=this.refs.userName.getDOMNode().value.trim();
    var userEmail= this.refs.userEmail.getDOMNode().value.trim();

    if(!userName || !userEmail){

    return;

    }


    this.props.onFormSubmit({userName:userName, userEmail:userEmail,url:"/api/submit"});

    this.refs.userName.getDOMNode().value='';
    this.refs.userEmail.getDOMNode().value='';

    return;

    },

    render: function() {
    var result=this.props.data;

       return (
        <div className={result}>{result.message}</div>

         <form className="formElem" onSubmit={this.handleSubmit}>
            Name: <input type="text" className="userName" name="userName" ref="userName" /><br/>
            Email: <input type="text" className="userEmail" name="userEmail" ref="userEmail" /><br/>
            <input type="submit" value="Submit" />

         <form >

        </div>


        );
      }
    });


    var RC= React.createClass({

    getInitialState: function() {

     return {data: ""};
      },

    onFormSubmit:function(data){

       $.ajax({
          url: this.props.url, …