Html 反应运动-强制按住按钮进行弹簧动画

我正试图将这两个输入设置为400像素的右侧动画，我从演示中复制了几乎所有的word，但我不得不按住我将动画绑定到的按钮，我不知道为什么。我想知道你们能不能解释一下是什么原因造成的。我还没反应过来，谢谢

import React, { Component } from 'react';
import {Motion, spring} from 'react-motion';


class LoginComponent extends Component {

  constructor(props) {
    super(props);
    this.state = {open: false};
  };

  handleMouseDown = () => {
    this.setState({open: !this.state.open});
  };

  handleTouchStart = (e) => {
    e.preventDefault();
    this.handleMouseDown();
  };

  render() {
    return (
        <form className="LoginForm">
          <Motion style={{x: spring(this.state.open ? 400 : 0)}}>
                    {({x}) =>
                    <div>
                      <input placeholder="Username" style={{
                        WebkitTransform: `translate3d(${x}px, 0, 0)`,
                        transform: `translate3d(${x}px, 0, 0)`,
                      }} />

                      <input placeholder="Password" style={{
                        WebkitTransform: `translate3d(${x}px, 0, 0)`,
                        transform: `translate3d(${x}px, 0, 0)`,
                      }} />
                    </div>
                    }
          </Motion>
          <button><h2> Log In </h2></button>
          <button onMouseDown={this.handleMouseDown.bind(this)} onTouchStart={this.handleTouchStart.bind(this)}> <h2> Sign Up </h2></button>


        </form>
    );
  }
}

export default LoginComponent;

import React，{Component}来自'React'；
从'react Motion'导入{Motion，spring}；
类LoginComponent扩展组件{
建造师（道具）{
超级（道具）；
this.state={open:false}；
};
handleMouseDown=（）=>{
this.setState（{open:！this.state.open}）；
};
handleTouchStart=（e）=>{
e、 预防默认值（）；
这个。handleMouseDown（）；
};
render（）{
返回(
{（{x}）=>
}
登录
注册
);
}
}
导出默认登录组件；

尝试使用

onClick

而不是

onMouseDown

注册按钮

onMouseDown

事件将您的open状态切换到其先前的状态

false

onmousedup