html - React-Motion - 强制按住弹簧动画按钮

Question

我正在尝试将这两个输入动画向右移动 400 像素，并且我已经从演示中的单词中复制了很多单词，但是我不得不按住将动画绑定到的按钮，并且我我不知道为什么。我想知道你们是否可以阐明造成这种情况的原因。我很新反应，谢谢。

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;

Answer 1

尝试使用而onClick不是注册按钮。onMouseDown

该onMouseDown事件将您的打开状态切换到其先前的状态falseonMouseUp