输入字段不会在reactjs中更改

问题描述

我正在尝试更改表单上的输入字段，但是我什么也不能更改。我需要帮助以查看在“ this.changeNameHandler”上做错了什么。

class UApt extends Component {
    constructor(props) {
        super(props)

        this.state = {
            details: [],id: this.props.match.params.id,appointmentName: ''
        }
        this.changeNameHandler = this.changeNameHandler.bind(this);
    }
   
    
    changeNameHandler = (event) => {
        this.setState({ appointmentName: event.target.value });
    }
    render() {
        return (
            <div>
                    <form onSubmit={this.handleSubmit}>
                        <div className="form-group">
                            <label> Name: </label>
                            <input 
                                type="text" 
                                placeholder="Name" 
                                name="appointmentName" 
                                className="form-control"
                                value={this.state.details.appointmentName} 
                                onChange={this.changeNameHandler} />
                    </form>
            </div>
        )
    }
}

解决方法

您可以将表单输入的值更改为此

<form onSubmit={this.handleSubmit}>
                        <div className="form-group">
                            <label> Name: </label>
                            <input 
                                type="text" 
                                placeholder="Name" 
                                name="appointmentName" 
                                className="form-control"
                                value={this.state.appointmentName} 
                                onChange={this.changeNameHandler} />
                    </form>

尝试更换

value={this.state.details.appointmentName}

使用

value={this.state.appointmentName}！

您似乎为该值分配了错误的状态项。

更改输入值 {this.state.details.appointmentName} 至 {this.state.details.appointmentName}

您还错过了className =“ form-group”的div的结束标记

reactjs reactjs