React入门教程中输入值无法更新name变量且始终显示undefined的问题排查求助

嘿，我来帮你排查下问题所在，主要有两个核心原因，同时给你一套符合React思路的修正方案：

问题分析 #

• Ref写法不兼容旧版本React：你用了ES6箭头函数作为ref回调，但React 0.13.3这个非常老旧的版本对ES6箭头函数的支持不完善，导致this.inputdemo没有被正确赋值，所以你取this.inputdemo.value时得到的是undefined。
• 直接操作DOM违背React数据流：你通过document.getElementById('dispName').innerHTML手动修改DOM内容，这不符合React的状态管理逻辑，React应该由组件状态（state）来驱动视图更新。

修正方案 #

我们需要调整ref的写法，并改用React的state来管理name值，具体修改如下：

1. 保持HTML代码不变 #

你的HTML代码可以原样保留，虽然React 0.13.3版本很老，但先聚焦解决当前问题：

<!DOCTYPE html>
<html>
<head>
<title>My First React Example</title>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react/0.13.3/react.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react/0.13.3/JSXTransformer.js"></script>
<script src="refscript.jsx" type="text/jsx"></script>
</head>
<body>
<div id="content"></div>
</body>
</html>

2. 修改refscript.jsx代码 #

把组件改成用state管理数据，同时使用兼容旧版本的ref写法：

var RefComponent = React.createClass({
    // 初始化state，设置name的初始值为空字符串
    getInitialState: function(){
        return {
            name: ''
        };
    },
    display: function(){
        // 从ref中获取输入值，然后更新state
        var inputValue = this.refs.inputdemo.value;
        this.setState({name: inputValue});
    },
    render:function(){
        return(
            <div>
                <h2>Name: <input type="text" ref="inputdemo" /></h2><br/>
                {/* 也可以用绑定this的普通函数回调ref，同样兼容0.13.3：
                <h2>Name: <input type="text" ref={function(input) { this.inputdemo = input; }.bind(this)} /></h2><br/>
                此时display函数里取this.inputdemo.value即可
                */}
                <button onClick={this.display}>Click</button>
                {/* 直接从state中取值渲染，不需要手动操作DOM */}
                <h1>Hi...{this.state.name}</h1>
            </div>
        );
    }
});
React.render(
    <RefComponent/>,
    document.getElementById('content')
)

关键修改说明 #

• 改用state管理数据：通过getInitialState初始化state，点击按钮时调用setState更新name值，React会自动重新渲染组件，把最新的name值显示出来，这是React的核心思路。
• 兼容旧版本的ref写法：要么用字符串ref（ref="inputdemo"），然后通过this.refs.inputdemo获取DOM元素；要么用绑定了this的普通函数作为ref回调，确保this.inputdemo能正确指向输入框。
• 移除手动DOM操作：不再用document.getElementById修改DOM内容，而是直接在render里使用this.state.name渲染，让视图完全由状态驱动。

这样修改后，你点击按钮就能正确显示输入的name值，也不会再出现undefined的问题啦！

内容的提问来源于stack exchange，提问作者Logan Wolff