Javascript 如何在react js中设置控件的道具值

我是新来的。我在UI上有将近15个输入控件。有些是下拉列表，有些是文本框，一些日历控件和单选按钮。我想在提交页面之前检索所有值。我是否需要在组件的状态对象中为15个输入定义15个道具？有没有办法把它放在一个物体上。 以及如何设置每个控件的值。比如我知道的textbox，它就像

---

如何处理同样的下拉，日历和广播布顿。提前感谢。

通常，这些不是道具，而是状态（这是不同的）。可以使用状态为的对象。如果您正在执行基于类的组件（

class-YourComponent-extensed-React.component

），则状态始终是您在构造函数中创建并使用

setState

更新的对象。如果在函数组件中执行此操作，通常会对每件事情使用单独的状态变量（

const[name，setName]=useState（“”；

），但如果愿意，可以使用对象。这里有更多关于国家的信息

也就是说，如果您在执行操作时只需要这些值，则可以进行“输入”

下面是一个使用

class

组件的三输入示例：

类示例扩展了React.Component{
建造师（道具）{
超级（道具）；
此.state={
名字：“，
姓氏：“，
关于：“
};
this.handleChange=this.handleChange.bind（this）；
}
handleChange（{target:{name，value}}）{
this.setState（{[name]：value}）；
}
render（）{
const{firstName，lastName，about}=this.state；
const{handleChange}=这个；
返回
名字：


姓氏：


关于你：


{firstName}{lastName}{（firstName | | lastName）&&about？-“：”}{about}
;
}
}
render（，document.getElementById（“根”））
这是我在应用程序中使用的示例代码

class CreditCardForm extends React.Component {
      constructor() {
        super()

        this.state = {
          name: '',
          address: '',
          ccNumber: ''
        }
      }

      handleChange(e) {
        // If you are using babel, you can use ES 6 dictionary syntax
        // let change = { [e.target.name] = e.target.value }
        let change = {}
        change[e.target.name] = e.target.value
        this.setState(change)
      }

      render() {
        return (
          <form>
            <h2>Enter your credit card details</h2>

            <label>
              Full Name
              <input type="name" onChange={(e)=>this.handleChange(e)} value={this.state.name} />
            </label>

            <label>
              Home address
              <input type="address" onChange={(e)=>this.handleChange(e)} value={this.state.address} />
            </label>

            <label>
              Credit card number
              <input type="ccNumber" onChange={(e)=>this.handleChange(e)} maxlength="16" value={this.state.ccNumber} />
            </label>

            <button type="submit">Pay now</button>
          </form>
        )
      }
    }

class CreditCardForm扩展了React.Component{
构造函数（）{
超级（）
此.state={
名称：“”，
地址：''，
编号：''
}
}
手变（e）{
//如果您使用的是babel，那么可以使用ES6字典语法
//让change={[e.target.name]=e.target.value}
让change={}
更改[e.target.name]=e.target.value
此.setState（更改）
}
render（）{
返回(
输入您的信用卡详细信息
全名
this.handleChange（e）}value={this.state.name}/>
家庭住址
this.handleChange（e）}值={this.state.address}/>
信用卡号码
this.handleChange（e）}maxlength=“16”值={this.state.ccNumber}/>
现在付款
)
}
}
您可以根据
事件.target.name
和
事件.target.value

constructor() {
    super();
    this.state = {
      text: "",
      select: "",
      radio: ""
    };
  }
  handeInput = e => {
    this.setState({
      [e.target.name]: e.target.value
    });
  };

  render() {
    console.log(this.state);
    return (
      <div className="App">
        <input
          onChange={this.handeInput}
          type="input"
          name="text"
          value={this.state.text}
        />
        <select
          name="select"
          onChange={this.handeInput}
          value={this.state.select}
        >
          <option value="option1">option1</option>
          <option value="option2">option2</option>
        </select>
        <input
          type="radio"
          name="radio"
          value="Option1"
          checked={this.state.radio === "Option1"}
          onChange={this.handeInput}
        />
        Option1
        <input
          type="radio"
          name="radio"
          value="Option2"
          checked={this.state.radio === "Option2"}
          onChange={this.handeInput}
        />
        Option2
      </div>
    );
  }

constructor（）{
超级（）；
此.state={
正文：“，
选择“”，
无线电：“
};
}
handeInput=e=>{
这是我的国家({
[e.target.name]：e.target.value
});
};
render（）{
console.log（this.state）；
返回(
选择1
选择2
选择1
选择2
);
}

您可以在这里查看，希望对您有所帮助
您好，我正在使用类组件。我将如何使用setState方法进行更新，这是我遇到的问题。我知道textbox，但不确定其他控件。@Nilesh-对于
textarea
和
input
，这几乎是一样的，我添加了一些示例。实际上，这是我的痛点。我有多个文本框、dropdwon和其他类型的控件。如果我将所有文本框的值设置为“相同名称”属性，则它将相互覆盖。我想要所有的文本框，下拉框，日历和单选按钮的值。我本来会尝试这个，但我有多个控件。因此，我的问题是我是否需要为每个控件定义一个状态属性是的，这将帮助您验证前端和后端的业务逻辑。确定。这样我的代码就会很长。但我会这样做的。非常感谢你的意见。