Javascript 一个输入组件，但每个事件的状态不同

我已经创建了一个组件元素。我正在以

的形式使用它

我将状态放在输入组件的类中，当我执行
控制台日志时，它们似乎共享相同的
状态
？这正常吗。需要将这些值发布到
laravel
api中，然后存储到
mysql
next。以下内容是否正确，或者我是否需要为我需要的每个字段创建一个输入组件。一个代表姓名，一个代表姓氏，一个代表电话，一个代表电子邮件等：

import React from 'react';
import styles from './Input.module.scss';

export class Input extends React.Component {
  constructor(props) {
    super(props);
    this.state = {
      inputValue: ''
    }

    this.onInputChange = this.onInputChange.bind(this);
  }

  onInputChange(e) {
    this.setState({ inputValue: e.target.value });
  }

  render() {
console.log(this.state.inputValue)

    return (
      <div className={styles.container}>
        <label htmlFor={this.props.id} className={styles.label} > {this.props.label} </label>
        <input 
          id={this.props.id}
          className={styles.input}
          type="text"
          value={this.state.inputValue}
          onChange={this.onInputChange}
        />
      </div>
    );
  }
};

从“React”导入React；
从“/Input.module.scss”导入样式；
导出类输入扩展了React.Component{
建造师（道具）{
超级（道具）；
此.state={
输入值：“”
}
this.onInputChange=this.onInputChange.bind（this）；
}
onInputChange（e）{
this.setState（{inputValue:e.target.value}）；
}
render（）{
console.log（this.state.inputValue）
返回(
{this.props.label}
);
}
};

在此处重用相同的组件：

  render() {
    return (
      <div className={styles.contactForm} >
        <form onSubmit={this.onFormSubmit}>
          <div className={styles.contactBlock} >
            <div className={styles.header} onClick={this.onStepOneClick} >
              <BoxHeader title="Step 1: Your Details" />
            </div>
            <div className={styles[this.state.stepOne]}>
              <div>
                <Input type="text" label="First Name" id="name" /> 
                <Input type="text" label="Surname" id="surname" />
              </div>
              <div>
                <Input type="email" label="Email Address" id="email" />
              </div>
              <div className={styles.button} onClick={this.onStepOneClick}>
                <Button innerHTML="Next >" />
              </div>
            </div>
          </div>

          <div className={styles.contactBlock} >
            <div className={styles.header} onClick={this.onStepTwoClick} >
              <BoxHeader title="Step 2: More Comments" />
            </div>
            <div className={styles[this.state.stepTwo]}>
              <div>
              <Input type="tel" label="Telephone Number" id="tel" />
              <Select label="Gender" id="gender" >
                <option> Male </option>
                <option> Female </option>
                <option> Other </option>
              </Select>
              </div>
              <div>
                <Date label="Date of Birth" id="dob"/>
              </div>
              <div className={styles.button}  onClick={this.onStepTwoClick}>
                <Button innerHTML="Next >" />
              </div>
            </div>
          </div>

          <div className={styles.contactBlock} >
            <div className={styles.header} onClick={this.onStepThreeClick} >
              <BoxHeader title="Step 3: Final Comments" />
            </div>
            <div className={styles[this.state.stepThree]}>
                <div className={styles.textArea}>
                  <Textarea label="Comments" id="comment" /> 
                </div>
                <div className={styles.submit}>
                  <Submit innerHTML="Next >" />
                </div>
            </div>
          </div>
        </form>
      </div>
    );

render（）{
返回(
男性
女性
其他
);
是，对于每个字段，您需要创建一个新输入。这可以在相同或新组件中，以您喜欢的为准。
是，对于每个字段，您需要创建一个新输入。这可以在相同或新组件中，以您喜欢的为准。
值={This.state.inputValue}
这将捕获正确的值。您不需要执行
console.log
。控制台日志就在那里供我查看。
value={this.state.inputValue}
这将捕获正确的值。您不需要执行
console.log
。console log就在那里让我看。但是我们制作组件以便可以重用它们。是否有办法使其可重用？您是否可以在使用输入组件的地方共享代码。@yappyhappy但我们制作组件以便可以重用它们。是否没有有没有一种方法可以使其可重用？您能在使用输入组件的地方共享代码吗？@Yappyhappy