logo标签列表

我的Reactjs代码报错：Uncaught TypeError: Cannot read property 'value' of null。

reactjs
3
我正在尝试编写一个程序，用于显示输入值对输出框的更改，但出现了错误，如“未捕获类型错误：无法读取null的属性'value'”，我不知道这里出了什么错误。 

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>

请问您能否添加一些错误细节？ - WitVault
我只收到一个错误，Uncaught TypeError: Cannot read property 'value' of null。 - user5323957
2个回答
5

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

this.refs.inputValue会给您实际的DOM节点。 您可以调用getValue()等方法来获取该节点的值。

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

我尝试使用var modifiedValue=this.refs.initialValue.getDOMNode().value;，但是出现了错误警告：ReactDOMComponent: 不要访问DOM节点的.getDOMNode()方法；而是直接使用该节点。这个DOM节点是由InputBox渲染的。 - user5323957
2
您不需要调用 getDOMNode()。您可以使用 this.refs.inputValue.getValue()。 - WitVault
var InputBox = React.createClass({ update:function(e){ // var modifiedValue=ReactDOM.findDOMNode(this.refs.initialValue).value; // var modifiedValue=this.refs.initialValue.value; var modifiedValue= e.target.value this.props.updateValue(modifiedValue); }, // 我在这里编写了三种方法，请问应该选择哪一种进行练习？ }); - user5323957
1
是的，这个this.refs.inputValue.getValue()和update:function(e)也。 - user5323957
0

我相信你的错误来自于ReactDOM.findDOMNode(this.refs.inputValue).value;。你的ref名为initialValue，因此正确的代码应该是

ReactDOM.findDOMNode(this.refs.initialValue).value;

此外，从React 0.14开始，您可以放弃使用findDOMNode方法来读取值，而是使用。
this.refs.initialValue.value

附注：也许您可以重新命名该引用以避免重复命名。

将输入值更改为初始值(initialValue)，它可以正常工作。但是，当我像这样使用var modifiedValue=this.refs.initialValue.getDOMNode().value;时，出现了错误警告：ReactDOMComponent: 不要访问DOM节点的.getDOMNode()；而是直接使用该节点。此DOM节点由“InputBox”呈现。 - user5323957
网页内容由stack overflow 提供, 点击上面的
可以查看英文原文，
原文链接