Question

在做出反应时，创建自定义事件的最佳方式是什么？

作为一个例子而不是：

readonly

能够做到这一点真好：

handleKeyPress: function(e) {
    if (e.key === 'Enter') {
        doSomething();
    }
}
...
<input onKeyPress={this.handleKeyPress} />

这可能吗？

我可以为<input onEnter={doSomething} />创建一个自定义包装器，但如果我想将其添加到<input>或<select>该怎么办？

Answer 1

您可以创建一个可以处理所有可能事件的基础组件，并扩展该组件以创建自定义元素，我会说这样更容易，因为您可以在一个类中使用所有事件，以备不时之需添加更多内容或更改某些行为。

＆＃13;

class BaseElement extends React.Component {
  constructor(props){
    super(props);
    
    this.onEnter = this.onEnter.bind(this);
    this.onSpace = this.onSpace.bind(this);
    this.onKeyPress = this.onKeyPress.bind(this);
  }
  onEnter (e) {
    this.props.onEnter()
  }
  onSpace (e) {
    this.props.onSpace()
  }
  onKeyPress (e) {
    switch(e.key){
      case 'Enter':
        this.onEnter()
      break;
      case ' ':
        this.onSpace()
      break;
      default:
        this.props.onChange()
      break;
    }
  }
};

class CustomText extends BaseElement {
  render() {
    return (
      <input type='text' onKeyPress={this.onKeyPress} />
    )
  }
};


class App extends React.Component {
  render() {
     return (
         <CustomText onSpace={e => console.log('space')}
         onEnter={e => console.log('Enter')} />
     )
  }
}


ReactDOM.render(<App />, document.getElementById('app'))

＆＃13;

<html>
<head>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.1.0/react.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.1.0/react-dom.js"></script>
</head>
<body>
<div id='app'></div>
</body>
</html>

＆＃13;

Answer 2

您无法将onEnter或任何其他自定义道具添加到标准dom元素中。但是，您可以将它们包装在自定义的React组件中：

const MyInput = ({onEnter}) => (
    <input onKeyPress={e => e.key === 'Enter' ? onEnter(e) : null } />
);

....

<MyInput onEnter={doSomething} />

Answer 3

我只想编写一个实用程序包装器，它将操作作为参数并返回处理函数：

HttpSesssion session = request.getSession();

Map<String, String> productMap;
SampleResult result;

if (session.getAttribute("productMap") == null) {
    productMap = retrievedatafromDB();
    result = new SampleResult();
    sampleResult.setProductMap(productMap);
    session.setAttribute("productMap", result);// session attribute created
} else {
    result = session.getAttribute("productMap");// retrieve session attribute
    productMap = result.getProductMap();
}

然后导入它并在我想要的任何元素上使用它

function onEnter(action) {
    return function(e) {
        if (e.key === 'Enter') {
            action();
        }
    }
}

反应自定义事件

3 个答案: