无法将数据输入到表单字段 React答案

【问题标题】：Can't input data into form field React无法将数据输入到表单字段 React
【发布时间】：2019-12-29 16:32:56
【问题描述】：

您好，我正在制作一个表格，有人可以告诉我为什么我似乎无法在输入字段中输入文本。我输入了“文本”类型，我认为这通常会解决这个问题。任何见解都将受到 100% 的赞赏。

import React, {Component} from 'react';

class CreateExercise extends Component{

constructor(){
    super()

  this.onChangeUsername = this.onChangeUsername.bind(this);
  this.onSubmit = this.onSubmit.bind(this);


    this.state = {
        username:'',
        description: '',
        duration: 0,
        users: []
    }
}

componentDidMount() {
    this.setState({
        users: ['test user'],
        username: 'test user'
    })
}

onChangeUsername(e) {
    this.setState({
        username: e.target.value
    });
}
onChangeUsername(e) {
    this.setState({
        description: e.target.value
    });
}
onChangeUsername(e) {
    this.setState({
        duration: e.target.value
    });
}




onSubmit(e) {
    e.preventDefault();

    const exercise = ({
        username: this.state.username,
        description: this.state.description,
        duration: this.state.duration
    })

    console.log(exercise)

    window.location = '/';
}
render(){
    return(
        <div>
           <h3>Create New Exercise Log</h3>
           <form onSubmit={this.onSubmit}>
               <div className="form-group">
                   <label>Username: </label>
                   <select ref="userInput"
                   required
                   className="form-control"
                   value={this.state.username}
                   onChange={this.onChangeUsername}>
                     {
                         this.state.users.map(function(user) {
                             return <option
                             key={user}
                         value={user}>{user}
                         </option>
                         })
                     }  
                   </select>
               </div>
               <div className="form-group">
                   <label>Description: </label>
                   <input type="text"
                   required
                   className="form-control"
                   value={this.state.description}
                   onChange={this.onChangeDescription}
                   />
               </div>
               <div className="form-group">
                   <label>Duration (in minutes)</label>
                   <input 
                   type="text"
                   className="form-control"
                   value={this.state.duration}
                   onChange={this.onChangeDuration}
                   />
               </div>
               <div className="form-group">
                   <input type="submit" value="Create Exercise Log" className="btn btn-primary"/>
               </div>
           </form>
        </div>
    )


  }
}

export default CreateExercise;

【问题讨论】：

标签： reactjs string forms input

【解决方案1】：

不要在值字段中使用 {this.state}。没必要。

你也有3个

onChangeUsername(e) {

我猜你可能想更新其他两种方法

【讨论】：

【解决方案2】：

您似乎缺少一些处理程序和绑定。例如，如果添加事件处理程序onChangeDuration：

onChangeDuration(e) {
    this.setState({
        duration: e.target.value
    });
}

并在构造函数方法中进行绑定，例如：

this.onChangeDuration = this.onChangeDuration.bind(this);

您的持续时间字段应该可以正常工作。您也可以将相同的逻辑应用于描述字段。

也不要忘记删除不必要的onChangeUsername 方法。希望对您有所帮助。

【讨论】：