Question

我有：

<form onSubmit= {handleSubmit}>
      <div className="form-group">
        <label htmlFor="focusedInput">Level</label>
        <input className="form-control" id="focusedInput" type="number" />               
        <div className="input-group-append">
          <button className="btn " type="submit">Submit</button>
        </div>
      </div>
      </form>

在我的handleSubmit中，如何将表单控件（type =“ number”）中的值传递给props函数？ event.target.value似乎无效。

Answer 1

您需要将状态用于受控输入。

示例：

this.state={
    number :0 //initialise state variable here or in componentWillMount or componentDidMount
}

handleChange(e){
// input change handler,extract value from e, update state here.
this.setState({
    number: e.target.value
})

handleSubmit(){
    // Use state variable and make ajax call or anything you want with your input here.
}

您的输入表单将如下所示。

<input className="form-control" id="focusedInput" type="number" value={this.state.number} onChange={this.handleChange.bind(this)/> 
//you can bind your function in constructor too.

您的“提交”按钮将如下所示

<button className="btn " onClick={this.handleSubmit.bind(this)>Submit</button>

bind(this)很重要，您需要将函数绑定到构造函数中，或者如上所述。将其绑定到构造函数中时，无需在bind(this)和input

中写入button

Answer 2

解决它的方法很少：

将值保存到状态onChange事件中。文档https://reactjs.org/docs/forms.html中的好例子。
定义declare @d1 date = '01/01/2018' declare @d2 date = '12/31/2018' ;with cte as ( select datepart(wk, @d2) as n ), agg as ( Select eid, datepart(wk, mydate) as dp, sum(late) as lates from Employee_Table where mydate between @d1 AND @d2 Group by eid, datepart(wk, mydate) ) Select i, eid, lates from dbo.NumbersTable(1,datepart(wk, @d2),1) as nt left join agg on i = dp order by i, eid并在提交时读取值。 https://reactjs.org/docs/refs-and-the-dom.html

对OnSubmit感到困惑

2 个答案: