Question

您好，我正在填写表格，有人可以告诉我为什么我似乎无法在输入字段中输入文本。我输入的是“文本”类型，我认为通常可以解决该问题。任何见识都会得到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;

Answer 1

不要在您的值字段中使用{this.state}。不需要它。

您也有3

onChangeUsername(e) {

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

Answer 2

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

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

并在构造方法内部进行绑定，如：

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

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

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

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

2 个答案: