代码之家 › 专栏 › 技术社区 › user1008636

对提交感到困惑

redux reactjs html javascript

user1008636 · 技术社区 · 6 年前

我有:

<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 似乎不起作用。

2 回复 | 直到 6 年前

Sameer Reza Khan 6 年前

您需要使用状态来控制输入。

例子:

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) 重要的是,您需要在构造器中绑定您的函数,或者如上所述。在构造函数中绑定它时,不需要编写 绑定(此) 在里面 input 和 button

Maksim Romanenko 6 年前

解决这个问题的方法很少:

将值保存到状态onchange事件中。文档中的好例子 https://reactjs.org/docs/forms.html .
定义 ref 并在提交时读取值。 https://reactjs.org/docs/refs-and-the-dom.html

推荐文章

Softly · 单选按钮未按预期取值

1 年前

Jason Owens · 我的html/javascript播放按钮无法播放嵌入的youtube视频

1 年前

SlickRed · 我无法使用JS关注HTML元素

1 年前

Mayron Guedes · 如果登录名不在本地存储中,如何重定向页面?

1 年前

assembler · Nextjs没有处理发布请求

1 年前

PavelB · 如何使用Seleniumwebdriver和mocha只运行一个测试文件?

1 年前

BADRUM · 执行两个获取功能后,如何导航回页面?

1 年前

Toniq · javascript为php保存多维数组

1 年前

Natalie Smyth · 隐藏类只在我试图切换的两个部分中的一个部分上工作

1 年前

SkyWalker · 在JavaScript中,合并日期-时间序列的有效算法是什么?

1 年前