Я не могу набрать ввод текста с помощью responsejs - PullRequest
Новая
       10

Я не могу набрать ввод текста с помощью responsejs

2 голосов
/ 26 октября 2019

Я не могу изменить текст при вводе текста! Это мой код: 

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);
}

значение ввода поступает из БД с использованием 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>

Ответы [ 2 ]

1 голос
/ 26 октября 2019

изменить value на defaultValue следующим образом. 

<input type="text" defaultValue={items.email} name="acc_email"  onChange={this.handleInputChange} />
0 голосов
/ 26 октября 2019

Вы явно устанавливаете значения входов как items.email, items.nom .., что делает их контролируемыми входами , что в основном означает, что ответственность за управление тем, что происходит с этими входами, лежит на компоненте. .

Поскольку вы уже реализовали часть, которая обновляет компонент 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} />
...