javascript - 在不使用 react-native-web 的情况下为 ReactJS 创建 "TouchableOpacity"

Question

我想创建一个行为类似于 react- native 的包装器组件s <TouchableOpacity/>不使用react-native-web .

我正在考虑管理状态并使用从 .5 转换的内联样式的东西至 1 setInterval 的不透明度或者它应该是一个 css 过渡。

那里有什么东西吗？

最好的方法是什么？

Answer 1

您可以通过 css 转换和使用状态来跟踪用户何时单击按钮来实现这种效果:

class App extends React.Component {

  state = {
    touched: false
  }
  
  toggleTouched = () => {
    this.setState( prevState => ({
      touched: !prevState.touched
    }));
  }
  
  handleMouseUp = () => {
    // Handle smooth animation when clicking without holding
    setTimeout( () => {
      this.setState({ touched: false });
    }, 150);
  }
  
  render () {
    const { touched } = this.state;
    const className = touched ? 'btn touched' : 'btn';
    return (
        <button 
          className={className}
          onMouseDown={this.toggleTouched}
          onMouseUp={this.handleMouseUp}
        >
          Touch Here
        </button>
    )
  }
}

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

.btn {
  background: #ededed;
  padding: 10px 15px;
  border: none;
  outline: none;
  cursor: pointer;
  font-size: 15px;
  
  opacity: 1;
  transition: opacity 300ms ease;
}

.touched {
  opacity: 0.5;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.1.0/react.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.1.0/react-dom.min.js"></script>
<div id="root"></div>