Javascript React重构简单输入组件

我有多个需要输入值的组件 因此，我在render方法上复制/粘贴以下代码：

 <input type="password"
             name="password" value={user.password}
             placeholder="password"
             onChange={e => this.handleChange(e)}/>

我希望在一个组件中输入并从我的所有组件调用它，然后获取输入值以将其添加到我的当前状态组件中

你有什么解决办法吗

---

如果我理解正确的话，谢谢你不要这样：

class MyWrapperComponent extends React.Component {
  constructor(props) {
    this.state = { password: '' }
  }

  handleChange(event) {
    const {name, value} = event.target
    this.setState({
      [name]: value,
    })
  }

  render() {
    return (
      <div>
        <MyInputComponent value={this.state.password} onChange={this.handeChange.bind(this)} />
        <MyDisplayPasswordComponent password={this.state.password} />
      </div>
    )
  }
}

const MyInputComponent = (props) => {
  return (
    <input type="password"
           name="password" value={props.password}
           placeholder="password"
           onChange={props.onChange}/>
  )
}

const MyDisplayPasswordComponent = (props) => {
  return <h1>Your secret password is {props.password}</h1>
}

类MyWrapperComponent扩展了React.Component{ 建造师（道具）{ this.state={密码：'} } 手变（活动）{ 常量{name，value}=event.target 这是我的国家({ [名称]：值， }) } render（）{ 返回( ) } } 常量MyInputComponent=（道具）=>{ 返回( ) } 常量MyDisplayPasswordComponent=（道具）=>{ 返回您的密码为{props.password} }

---

我认为您可以将所有这些都封装在一个名为MyCustomInput的组件中，然后根据需要将handleChange作为作为作为道具传递的回调进行管理您可以将状态作为道具传递，但如果我更新子组件中的状态，家长不会更新新密码是这样的，但可能会有密码、电子邮件、名字的通用输入…我不知道你的意思？

class MyWrapperComponent extends React.Component {
  constructor(props) {
    this.state = { password: '' }
  }

  handleChange(event) {
    const {name, value} = event.target
    this.setState({
      [name]: value,
    })
  }

  render() {
    return (
      <div>
        <MyInputComponent value={this.state.password} onChange={this.handeChange.bind(this)} />
        <MyDisplayPasswordComponent password={this.state.password} />
      </div>
    )
  }
}

const MyInputComponent = (props) => {
  return (
    <input type="password"
           name="password" value={props.password}
           placeholder="password"
           onChange={props.onChange}/>
  )
}

const MyDisplayPasswordComponent = (props) => {
  return <h1>Your secret password is {props.password}</h1>
}