我无法使用 reactjs 输入输入文本

Question

我无法在输入文本时更改文本！这是我的字体代码：

constructor(props) {
    super(props);
    this.state = {
        items: [],
        acc_email: '',
        acc_nom: '',
        acc_prenom: '',
        acc_tel: '',
    };
    this.handleInputChange = this.handleInputChange.bind(this); 
    this.handleSubmit = this.handleSubmit.bind(this);
}

输入的值来自 DB using fetch :

 componentDidMount(){
        const token =  localStorage.getItem('toktok');
        fetch(`${API}/api/account`,{
            method: 'GET',
            headers :{
                'authorization': `Bearer ${token}`, 
            }
        })

        .then(results => {
            return results.json();
        })

        .then(data => {
            this.setState({ items: data.result });
            console.log("account: ",data.result);
            // localStorage.setItem('mymy',  "fiss");
            // console.log(items);
            // console.log(items.length); 

        })
        .catch(err => {
            console.log("erroooor : ",err);
        });    
    }

我不知道这个函数有什么问题:

handleInputChange = e => { 
       const name = e.target.name;
       const value = e.target.value;
       this.setState({[name]: value});
       this.setState({ [e.target.name]: e.target.value });
}

最后，这是包含所有输入的 render()：

<div key={items._id}>
     <input type="text" value={items.email} name="acc_email"  onChange={this.handleInputChange} />
     <input type="text" value={items.nom} name="acc_nom"  onChange={this.handleInputChange} />
     <input type="text" value={items.prenom} name="acc_prenom"  onChange={this.handleInputChange} />
     <input type="text" value={items.tel}  name="acc_tel" onChange={this.handleInputChange} />
     <a className="admin-btn-update" href={`/updateaccount/${items._id}`}>Modifier</a>
</div>

Answer 1

您将输入的值明确设置为 items.email、items.nom.. 这使得它们 controlled inputs，这基本上意味着控制发生的事情是组件的责任到那些输入。

由于您已经实现了更新组件的部分 state，您需要做的就是使输入值反映此状态：

 <input type="text" value={this.state.acc_email} name="acc_email"  onChange={this.handleInputChange} />
 <input type="text" value={this.state.acc_nom} name="acc_nom"  onChange={this.handleInputChange} />
 <input type="text" value={this.state.acc_prenom} name="acc_prenom"  onChange={this.handleInputChange} />
 <input type="text" value={this.state.acc_tel}  name="acc_tel" onChange={this.handleInputChange} />

Answer 2

将value改为defaultValue如下。

<input type="text" defaultValue={items.email} name="acc_email"  onChange={this.handleInputChange} />

我无法使用 reactjs 输入输入文本

I can't type in input text using reactjs

onchange

reactjs