почему e.target.value захватывает только первую букву при вводе строки вactjs - PullRequest
Новая
       18

почему e.target.value захватывает только первую букву при вводе строки вactjs

0 голосов
/ 01 января 2019

На входе вводится только первая буква в строке ввода.И правильно ли этот метод? 

class Example extends React.Component{

    state={
        name:'Ajith'
    }

    changeEvent = (e) => {
        console.log('change : '+this.state.name)
        let name = this.state.name;
        this.setState({
            name : e.target.value
        });
    }

    edit = () => {
        console.log('edit : '+this.state.name)
        this.setState({
            name : <input value={this.state.name} ref = {(input) =>{this.Edit = input}} onChange={this.changeEvent}/> 
        });
    }

    render()
    {
        console.log('render : '+this.state.name)
        return(
            <div>
                <button onClick={this.edit}>
                    Edit
                </button>
                {this.state.name}
            </div>
        )
    }
}

ReactDOM.render(
    <Example />,
    document.getElementById("root")
);
<div id="root"></div>

<script src="https://cdnjs.cloudflare.com/ajax/libs/react/16.6.3/umd/react.production.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react-dom/16.6.3/umd/react-dom.production.min.js"></script>

1 Ответ

0 голосов
/ 01 января 2019

Вы преобразуете из input обратно в string для события change, которое запускается при каждом изменении поля в React (а не только тогда, когда пользователь покидает поле).Если вы подождете, пока пользователь выполнит (например, с помощью blur), это сработает.(Или кнопка OK, или ...) Также настоятельно рекомендуем сохранять только имя, не переключаясь между именем и input для него;просто используйте флаг и условный рендеринг.Также обратите внимание, что вам вообще не нужно ref.

Некоторое чтение: Формы в документации

Больше чтения: Функции стрелок в свойствах класса могут быть не такими большими, как мы думаем 

class Example extends React.Component{

    state = {
        name: 'Ajith',
        editing: false
    };

    changeEvent = (e) => {
        this.setState({
            name: e.target.value
        });
    };
    
    blurEvent = (e) => {
        this.setState({editing: false});
    };

    edit = () => {
        this.setState({editing: true});
    };

    render() {
        return(
            <div>
                <button onClick={this.edit}>
                    Edit
                </button>
                {this.state.editing
                ? <input type="text" value={this.state.name} onChange={this.changeEvent} onBlur={this.blurEvent} />
                : this.state.name
                }
            </div>
        );
    }
}

ReactDOM.render(
    <Example />,
    document.getElementById("root")
);
<div id="root"></div>

<script src="https://cdnjs.cloudflare.com/ajax/libs/react/16.6.3/umd/react.production.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react-dom/16.6.3/umd/react-dom.production.min.js"></script>
...