我只能在特定条件下添加React输入事件处理程序吗

Question

只有当条件为true时，我才想在元素上添加onFocus事件处理程序。现在，我希望能够在onFocus本身上做一个三元，所以类似这样的东西：

<input
type='text'
className='some-class'
value={value}
onFocus={useTheOnFocus ? evt => onFocusHandler(evt) : null}
onChange={evt => onChangeHandler(evt.target.value)}
/>

然而，这不起作用，并产生一系列错误和警告：

未捕获类型错误：handler.apply不是函数

警告：无法对已卸载的组件调用setState(或forceUpdate(。这是一个非操作，但它表明应用程序中存在内存泄漏。若要修复此问题，请取消componentWillUnmount方法中的所有订阅和异步任务。

我知道另一种选择是在它自己的三进制中写两次输入标记，一个有onFocus，另一个没有。但我想在更稠的物质中写。有没有其他更简单、更简洁的方法来完成这项工作？

Answer 1

您可以添加此

onFocus={useTheOnFocus ? onFocusHandler : undefined}

或设置一个处理程序

onFocus={onFocusHandler}

并检查处理程序中的条件

onFocusHandler = (ev) => {
if(!condition) {
return null;
}
// your code
}

Answer 2

如果不希望事件处理程序处于活动状态，则可以为它们指定值undefined。

示例

class App extends React.Component {
state = { useTheOnFocus: false };
componentDidMount() {
setInterval(() => {
this.setState(prevState => ({
useTheOnFocus: !prevState.useTheOnFocus
}));
}, 2000);
}
onFocusHandler = evt => {
evt.preventDefault();
console.log("Focus handler active");
};
render() {
const { useTheOnFocus } = this.state;
return (
<input
type="text"
className="some-class"
onFocus={useTheOnFocus ? this.onFocusHandler : undefined}
/>
);
}
}
ReactDOM.render(<App />, document.getElementById("root"));

<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>