Question

我使用React制作Markdown预览器并尝试了解使用了什么here，以便在左侧更改文本后立即使用实时预览更新正确的框。他们在底部有这个代码：

var RawInput = React.createClass({
    update:function(){
        var modifiedValue=this.refs.inputValue.getDOMNode().value;
        this.props.updateValue(modifiedValue);
    },
    render:function(){
        return (<textarea rows="22" type="text" ref="inputValue" value={this.props.value} onChange={this.update} className="form-control" />)
    }
});

我在我的代码中实现了这个：

const InputText = React.createClass ({
    update() {
        let newValue = this.refs.inputValue.getDOMNode().value;
        this.props.updateValue(newValue);
    },
    render() {
        return (
            <div>
                <textarea 
                    id="input-text" 
                    rows="18"
                    type="text"
                    ref="inputValue"
                    value={this.props.value}
                    onChange={this.update}
                    />
            </div>
        );
    }
});

该应用程序运行正常，但没有实时预览，右侧的文本没有更新。在控制台中，我收到此错误：this.refs.inputValue.getDOMNode is not a function。

以下是完整代码：

import React from 'react';
import Banner from './components/Banner.jsx';
import ContainerHeader from './components/ContainerHeader.jsx';
import marked from 'marked';

const App = React.createClass ({
   updateValue(newValue) {
        this.setState ({
            value: newValue
        })
    },
    getInitialState() {
        return {
            value: 'Heading\n=======\n\nSub-heading\n-----------\n \n### Another deeper heading\n \nParagraphs are separated\nby a blank line.\n\nLeave 2 spaces at the end of a line to do a  \nline break\n\nText attributes *italic*, **bold**, \n`monospace`, ~~strikethrough~~ .\n\nShopping list:\n\n  * apples\n  * oranges\n  * pears\n\nNumbered list:\n\n  1. apples\n  2. oranges\n  3. pears\n'
        }
    },
    markup(value) {
        return {__html: value}
    },
    render() {
      return (
          <div>
            <Banner />
            <div className="container">
                <div className="row">
                    <div className="col-xs-12 col-sm-6">
                        <ContainerHeader text="I N P U T" />
                        <InputText 
                            value={this.state.value}
                            updateValue={this.updateValue} />
                    </div>
                    <div className="col-xs-12 col-sm-6">
                        <ContainerHeader text="O U T P U T" />
                        <div id="output-text">
                            <span dangerouslySetInnerHTML={this.markup(marked(this.state.value))}></span>
                        </div>
                    </div>
                </div>
            </div>
          </div>
      );
   }
});

const InputText = React.createClass ({
    update() {
        let newValue = this.refs.inputValue.getDOMNode().value;
        this.props.updateValue(newValue);
    },
    render() {
        return (
            <div>
                <textarea 
                    id="input-text" 
                    rows="18"
                    type="text"
                    ref="inputValue"
                    value={this.props.value}
                    onChange={this.update}
                    />
            </div>
        );
    }
});

export default App;

欢迎解决此问题的任何帮助，谢谢！

Answer 1

由于React this.refs.inputValue中的version 15.*引用DOMElement，因此您不需要使用getDOMNode;

this.refs.inputValue.value

但是，我认为在这种情况下您不需要使用refs，当您在update事件中致电onChange时，您可以获得target（参考textarea来自event对象，target获取value

update(e) {
  this.props.updateValue(e.target.value);
},

Answer 2

该示例使用的是React v0.14.x，它是一个组合模块。

从React v15（0.15，但他们改为使用它作为主要），方法和类被分成两个模块，React和ReactDOM。

您需要导入并使用require([ "dijit/registry", "dojo/parser", "dojo/ready", "dojo/domReady!" ], function(registry, parser,ready) { parser.parse(); ready(function(){ var text = registry.byId("txt"); console.log(text); text.set("value", "hello"); }) });，可以找到here的文档。

Answer 3

您实际上不需要this.refs.inputValue

update(e) {
    this.props.updateValue(e.target.value);
},

反应不更新文本（问题与.getDOMNode（））

3 个答案: