reactjs React-Dateicker handleChange具有多个name属性

ryevplcw 于 2023-08-04 发布在 React

关注(0)|答案(3)|浏览(75)

我有6个使用React-Datepicker的表单输入。我需要使用handleChange（）来setState 6次，但我不明白如何从每个表单输入动态获取name属性，因为'date'在通过函数传递时不包含任何其他数据。我试过输入“名字”，但不管用。handleSelect（）也是如此

this.state = {
  dateOne: new Date(),
  dateTwo: new Date(),
  dateThree: new Date(),
  dateFour: new Date(),
  dateFive: new Date(),
  dateSix: new Date()
}

handleChange(date) {
  this.setState({ ...this.state, ?????: date });
}

handleSelect(date) {
  this.setState({ ...this.state, ?????: date });
}

<form>
  <DatePicker
    name="dateOne"
    selected={this.state.dateOne}
    onSelect={this.handleSelect}
    onChange={this.handleChange}
  />
  <DatePicker
    name="dateTwo"
    selected={this.state.dateTwo}
    onSelect={this.handleSelect}
    onChange={this.handleChange}
  />
  <DatePicker
    name="dateThree"
    selected={this.state.dateThree}
    onSelect={this.handleSelect}
    onChange={this.handleChange}
  />
 <DatePicker
    name="dateFour"
    selected={this.state.dateFour}
    onSelect={this.handleSelect}
    onChange={this.handleChange}
  />
  <DatePicker
    name="dateFive"
    selected={this.state.dateFive}
    onSelect={this.handleSelect}
    onChange={this.handleChange}
  />
  <DatePicker
    name="dateSix"
    selected={this.state.dateSix}
    onSelect={this.handleSelect}
    onChange={this.handleChange}
  />
</form>

字符串
我也试过这个：https://github.com/Hacker0x01/react-datepicker/issues/242没有任何运气。
任何帮助将是真棒！

reactjs

来源：https://stackoverflow.com/questions/53660661/react-datepicker-handlechange-with-multiple-name-attributes

3条答案

按热度按时间

agyaoht71#

你可以这样尝试：

<DatePicker
    name="dateOne"
    selected={this.state.dateOne}
    onSelect={this.handleSelect}
    onChange={(date)=>this.handleChange(date, 'dateOne')} //pass name as string
  />

handleChange(date, name) {
    this.setState({
        [name]: data
    });
}

字符串
由于不能访问target.name，因此将名称作为字符串传递，然后通过收到的名称[name]更新状态

赞(0）回复(0）举报 2023-08-04

vlurs2pr2#

或者你可以这样做

<DatePicker
    name="dateOne"
    selected={this.state.dateOne}
    onSelect={this.handleSelect}
    onChange={(date) => {
        date.name = 'dateOne';// add name to object to return
        this.handleChange(date);
    }
  />

handleChange(date) {
    this.setState({
        [date.name]: data
    });
}

字符串

赞(0）回复(0）举报 2023-08-04

uqxowvwt3#

试试这个代码

handleChange(date, flag) {
   if(flag===1)
   {
      this.setState({
         dateOne: date
      })
   }
   if(flag===2)
   {
      this.setState({
         dateTwo: date
      })
   }
   if(flag===3)
   {
      this.setState({
         dateThree: date
      })
   }
   if(flag===4)
   {
      this.setState({
         dateFour: date
      })
   }
   if(flag===5)
   {
      this.setState({
         dateFive: date
      })
   }
   if(flag===6)
   {
      this.setState({
         dateSix: date
      })
   }
}

......

<form>
<DatePicker
    name="dateOne"
    selected={this.state.dateOne}
    onSelect={this.handleSelect}
    onChange={(date)=>this.handleChange(date, 1)}
  />
  <DatePicker
    name="dateTwo"
    selected={this.state.dateTwo}
    onSelect={this.handleSelect}
    onChange={(date)=>this.handleChange(date, 2)}
  />
  <DatePicker
    name="dateThree"
    selected={this.state.dateThree}
    onSelect={this.handleSelect}
    onChange={(date)=>this.handleChange(date, 3)}
  />
 <DatePicker
    name="dateFour"
    selected={this.state.dateFour}
    onSelect={this.handleSelect}
    onChange={(date)=>this.handleChange(date, 4)}
  />
  <DatePicker
    name="dateFive"
    selected={this.state.dateFive}
    onSelect={this.handleSelect}
    onChange={(date)=>this.handleChange(date, 5)}
  />
  <DatePicker
    name="dateSix"
    selected={this.state.dateSix}
    onSelect={this.handleSelect}
    onChange={(date)=>this.handleChange(date, 6)}
  />
</form>

字符串

赞(0）回复(0）举报 2023-08-04

我来回答

reactjs React-Dateicker handleChange具有多个name属性

3条答案

相关问题

热门标签

最新问答