Question

我的 Reactjs 代码显示未捕获 TypeError：无法读取 null 的属性“value”

2016-02-28

3157

reactjs

我正在尝试编写一个程序，将输入值所做的更改显示在输出框中，但出现了类似未捕获类型错误：无法读取 null 的属性“值”的错误，我不知道这里的错误是什么

var App =React.createClass({
    getInitialState:function(){
        return{
            value:"My Value"
        }
    },
    updateValue:function(modifiedValue){
        this.setState({
            value:modifiedValue
        })
    },
    render:function(){
        return(
            <div className="inputBox container-fluid">
                <h1 className="text-center text-primary">Hello FreeCodeCampers !!!</h1>
                <div className="row col-md-12">
                    <InputBox value={this.state.value} updateValue={this.updateValue}/>
                    <h1>{this.state.value}</h1>
                </div>
            </div>
        );
    }
});
var InputBox =React.createClass({
    update:function(){
        var modifiedValue=ReactDOM.findDOMNode(this.refs.inputValue).value;
        this.props.updateValue(modifiedValue);
    },
    render:function(){
        return(
            <input type="text" value={this.props.value} onChange={this.update} ref="initialValue"/>
        );
    }
});
ReactDOM.render(<App />,
document.querySelector("#app")
);

<!DOCTYPE html>
<head>
    <meta charset="UTF-8" />
    <title>React Tutorial</title>
    <link rel="stylesheet" href="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css">
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.0/jquery.min.js"></script>
    <script src="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js"></script>
</head>
<div id="app"></div>
<script src="demo.js" type="text/babel"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react/0.14.7/react.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react/0.14.7/react-dom.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/babel-core/5.8.23/browser.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/marked/0.3.2/marked.min.js"></script>
</body>
</html>

Answer 1

使用您的 React 版本 （React v0.14 及以上版本） ，您无需调用 ReactDOM.findDOMNode(this.refs.inputValue)

this.refs.inputValue 为您提供实际的 dom 节点。您可以调用 getValue() 等方法来获取该节点的值。

我希望这能解决您的问题。

Answer 2

我相信您的错误来自 reactdom.finddomnode（this.refs.inputValue）.value; 。您的参考是 initialValue ，因此正确的代码应为

807137812

进一步，从react 0.14开始，我认为您可以删除FindDomnode方法的方法阅读值并使用

231404802

ps：也许您可以重命名以避免重复命名。