为什么 e.target.value 只捕获 reactjs 中字符串输入的第一个字母

Question

输入仅捕获字符串输入中的第一个字母。那个方法正确吗？

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>

Answer 1

您正在从 input 转换回 change 事件上的 string，该事件会在 React 中字段的每次更改时触发（不仅仅是当用户离场）。如果您等到用户完成（例如，使用 blur），它就会起作用。（或 OK 按钮，或...）此外强烈建议只存储名称，不要在名称和 input 之间切换；只需使用标志和条件渲染。另请注意，您根本不需要 ref。

一些阅读：Forms 文档

更多阅读：Arrow Functions in Class Properties Might Not Be As Great As We Think

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>

为什么 e.target.value 只捕获 reactjs 中字符串输入的第一个字母

how come e.target.value is only capturing the first letter in string input in reactjs

javascript

input

onchange

button

reactjs