``` <Input onChange={(e) => (data.keyName = e.target.value)} />```如何限制以上代码中的input只能输入英文和‘-’

这个React `Input`组件通过`onChange`事件处理用户在输入框中的值变化，将输入的内容赋值给`keyName`。为了限制输入只允许英文字符和破折号`-`，你可以使用正则表达式校验或者第三方库如`react-text-mask`。

下面是一个简单的例子，展示如何使用正则表达式做验证：

import React, { useState } from 'react';

const validateInput = (value) => /^[a-zA-Z-]*$/.test(value);

function CustomInput() {
  const [data, setData] = useState({ keyName: '' });
  const [isValid, setIsValid] = useState(true);

  const handleChange = (e) => {
    const value = e.target.value;
    if (validateInput(value)) {
      setData({ ...data, keyName: value });
    } else {
      setIsValid(false);
    }
  };

  return (
    <Input
      type="text"
      value={data.keyName}
      onChange={handleChange}
      invalid={!isValid} // 显示输入无效状态
      placeholder="Only English and '-' allowed"
    />
  );
}

在这个示例中，我们在`handleChange`函数中检查输入是否符合正则表达式`^[a-zA-Z-]*$`，它匹配零个或多个字母和破折号。如果不符合，`isValid`标志设为`false`，然后`<Input>`组件会显示输入无效的状态。