在1个提交表单上发送2个值

时间:2017-03-08 22:25:33

标签: javascript reactjs react-redux

如何在一个函数fetchCalendar();

中提交2个不同的值
 class SearchMonth extends Component {
      constructor(props) {
        super(props);
        this.state = {term: '' };
        this.onInputChange = this.onInputChange.bind(this); //
        this.onFormSubmit = this.onFormSubmit.bind(this);
      }

  onInputChange(event) {
    this.setState({term: event.target.value});
  }

  onFormSubmit(event) {
    event.preventDefault();
    this.props.fetchCalendar(this.state.term);
  }


  render() {
    return (
      <form
        onSubmit={this.onFormSubmit}
        className="input-group">
        <input
          placeholder="insert week number of range 1 - 64"
          className="form-control"
          value={this.state.term}
          onChange={this.onInputChange}
        />
        <input
          placeholder="insert user ID"
          className="form-control"
          value={this.state.id}
          onChange={this.onInputChange}
        />
        <span className="input-group-btn">
          <button type="submit" className="btn btn-secondary">Submit</button>
        </span>
      </form>
    );
  }
}

动作创建者中的此功能看起来像这样

export function fetchCalendar(week) {
  const url = `${ROOT_URL}${week}/users/${USER}`;
  const request = axios.get(url)
  .catch(function (error) {
    if (error.response) {
      alert('This weekend is out of range of our API and wouldnt be displayed!')
    }
  });
  return {
    type: FETCH_CALENDAR,
    payload: request 
  };
}

现在我只能通过术语(星期)并获得请求,但也需要通过API我需要传递term(week)和user(id)。因此请求应如下所示:

`${ROOT_URL}${week}/users/id

现在我的用户ID是常量const USER = 1,我希望有机会从公式传递它。所以我希望fetchCalendar有2个参数,周+用户ID,其中这2个值来自一个提交表单上的2个单独输入。重

0 个答案:

没有答案