Javascript 如何处理TextInput组件的更改？

我制作了这个文本输入组件

export const TextInput = (props) => {
  const { label } = props
  return (
    <div className="field text">
      <input type="text" />
      <label>{label}</label>
    </div>
  )
}

export const TextInput = (props) => {
  const { label } = props
  return (
    <div className="field text">
      <input onChange={props.onChange} type="text" />
      <label>{label}</label>
    </div>
  )
}

export const TextInput=（道具）=>{
常量{label}=props
返回(
{label}
)
}

但是在调用这个组件时，我想根据其名称处理每个输入的更改

handleChange = (e) => this.setState({ [e.target.name]: e.target.value })


<TextInput
   label="Email"
   name="email"
   value={this.state.email}
   onChange={this.handleChange}
/>

handleChange=（e）=>this.setState（{[e.target.name]：e.target.value}）

问题是我的状态和方法不在组件中

export const TextInput = (props) => {
  const { label } = props
  return (
    <div className="field text">
       // use props
      <input type="text"
        onChange={props.onChange}
        name={props.name}
        value={props.value}
      />
      <label>{label}</label>
    </div>
  )
}

const emailRef = useRef(null)

handleChange = () => this.setState({ [emailRef.current.name]: emailRef.current.value })


<TextInput
   label="Email"
   name="email"
   value={this.state.email}
   onChange={this.handleChange}
   ref={emailRef}
/>

---

我必须在props中传递我的方法？

尝试将onChange添加到子组件中

export const TextInput = (props) => {
  const { label } = props
  return (
    <div className="field text">
      <input type="text" />
      <label>{label}</label>
    </div>
  )
}

export const TextInput = (props) => {
  const { label } = props
  return (
    <div className="field text">
      <input onChange={props.onChange} type="text" />
      <label>{label}</label>
    </div>
  )
}

export const TextInput=（道具）=>{
常量{label}=props
返回(
{label}
)
}

您需要首先在

输入上启用onChange处理程序：

export const TextInput = (props) => {
  const { label } = props
  return (
    <div className="field text">
      <input type="text" onChange={props.onChange}/>
      <label>{label}</label>
    </div>
  )
}

export const TextInput=（道具）=>{
常量{label}=props
返回(
{label}
)
}

问题是我的状态和方法不在组件中

export const TextInput = (props) => {
  const { label } = props
  return (
    <div className="field text">
       // use props
      <input type="text"
        onChange={props.onChange}
        name={props.name}
        value={props.value}
      />
      <label>{label}</label>
    </div>
  )
}


const emailRef = useRef(null)

handleChange = () => this.setState({ [emailRef.current.name]: emailRef.current.value })


<TextInput
   label="Email"
   name="email"
   value={this.state.email}
   onChange={this.handleChange}
   ref={emailRef}
/>

这其实不是问题。你做得对

这就是React所说的

因此，只需在您的子组件中使用
道具即可

export const TextInput = (props) => {
  const { label } = props
  return (
    <div className="field text">
       // use props
      <input type="text"
        onChange={props.onChange}
        name={props.name}
        value={props.value}
      />
      <label>{label}</label>
    </div>
  )
}


const emailRef = useRef(null)

handleChange = () => this.setState({ [emailRef.current.name]: emailRef.current.value })


<TextInput
   label="Email"
   name="email"
   value={this.state.email}
   onChange={this.handleChange}
   ref={emailRef}
/>

export const TextInput=（道具）=>{
常量{label}=props
返回(
//使用道具
{label}
)
}
因此，您应该像这样创建
TextInput
：

export const TextInput = (props) => {
  const { 
     name,
     label,
     value,
     onChange,
     disabled,
     customClass,
      ...others
  } = props
  return (
    <div className="field text">
      <input 
         className={customClass}
         name={name}
         type="text"
         disabled={disabled}
         value={value}
         onChange={e => onChange(e)} // I will return event here, not currenTarget.value
         {...others}
      />
      <label>{label}</label>
    </div>
  )
}

您可以使用useRef钩子并将其传递给TextInput组件

export const TextInput = (props) => {
  const { label } = props
  return (
    <div className="field text">
       // use props
      <input type="text"
        onChange={props.onChange}
        name={props.name}
        value={props.value}
      />
      <label>{label}</label>
    </div>
  )
}


const emailRef = useRef(null)

handleChange = () => this.setState({ [emailRef.current.name]: emailRef.current.value })


<TextInput
   label="Email"
   name="email"
   value={this.state.email}
   onChange={this.handleChange}
   ref={emailRef}
/>

const emailRef=useRef（空）
handleChange=（）=>this.setState（{[emailRef.current.name]：emailRef.current.value}）
这不是类组件，
这
不起作用。也不需要在函数中包装
onChange
prop。我已经生成了相同的代码，我的handleChange方法响应我“无法读取未定义的属性'name'”，您可以再次看到我的编辑。我将在
TextInput
中返回
onChange
事件，而不是
currentTarget.value