Javascript 如何在React中创建类似于onChange的事件

我有一个react native输入组件，它接受一个正则表达式并在正则表达式匹配时发出一个布尔值

我想做类似的事情，但是在React Js中返回一个字符串值，但问题是我不完全理解React原生输入组件是如何工作的

自定义输入组件

类CustomInput扩展组件{
扶手（价值）{
const{pattern}=this.props；
如果（！模式）{
返回true；
}
//字符串模式，一个验证规则
如果（模式类型==='string'）{
const condition=newregexp（模式“g”）；
返回条件。测试（值）；
}
//数组模式、多个验证规则
如果（模式类型===‘对象’）{
const conditions=pattern.map（rule=>newregexp（rule'g'））；
返回conditions.map（condition=>condition.test（value））；
}
}
onChange（值）{
const{onChangeText，onValidation}=this.props；
const isValid=this.handleValidation（值）；
onValidation&&onValidation（isValid）；
onChangeText&&onChangeText（值）；
}
render（）{
const{pattern，onChangeText，children，style，…props}=this.props；
返回(
this.onChange（值）}
{…道具}
autoCapitalize=“无”>
{儿童}
);
}
}

用法

performValidation（isValid）}
//performValidatio方法根据isValid启用和禁用按钮
/>

---

现在我想在ReactJs中创建一个组件，它有一个输入和其他元素，输入将接受一个正则表达式，并将其输入值返回给父元素。它将以一种有许多输入的形式使用，所有输入都需要有错误消息和验证。

我已经理解了逻辑，如果有人想这样输入，他们可以使用此代码

我使用react bootstrap进行造型

自定义输入

import React，{useState}来自“React”；
导出默认功能CustomInput（道具）{
const{error，inputProps，regex，className，onInput}=props；
常量[淋浴错误，设置显示错误]=使用状态（错误）；
const[text，setText]=useState（“”）；
常量handleChange=（val）=>{
setText（val）；
if（正则表达式测试（val））{
设置显示错误（错误）；
}否则{
设置显示错误（真）；
}
onInput&&onInput（val）；
};
返回(
handleChange（e.target.value）}
/>
{错误&&错误(
{错误}
)：null}
);
}

并在这样的父组件中使用它

const[temp，settmp]=useState（“”）；
settmp（val）}
/>

---

有人请确认这是否是一种好方法

您可以创建具有受控状态的自定义组件。您需要在自定义组件中设置本地状态。在值更改时，您可以解析和验证。之后，将其设置为本地状态。您可以利用本地或委托给父级的错误。在下面的示例中，我已委托给家长进行验证

const Input = ({
  onChangeText,
  pattern,
  onValidation,
  defaultValue,
  error,
  ...rest
}) => {
  const [value, setValue] = useValue(defaultValue);
  const onChange = ({ target: { value } }) => {
    if (pattern) onValidation(pattern.test(value));
    setValue(value);
    onChangeText(value);
  };
  return (
    <div className="wrapper">
      <input value={value} onChange={onChange} {...rest} />
      {error && <span>{error}</span>}
    </div>
  );
};

const输入=({
一旦更改文本，
图案
在验证时，
默认值，
错误，
休息
}) => {
常量[值，设置值]=使用值（默认值）；
const onChange=（{target:{value}}）=>{
if（模式）onValidation（模式测试（值））；
设置值（值）；
onChangeText（值）；
};
返回(
{error&&{error}
);
};