Question

我正在从Freecodecamp实施Markdown预览器，但我遇到了一些问题。输入组件上的onChange事件未被触发，我无法弄清楚原因！

有什么想法吗？

＆＃13;

class Person {
public:
    int height; // each Person has their own height, so this is an instance member
    static int averageHeight; // but an individual Person doesn't have an "average height" - but a single average-height value can be used for all Persons, so this is a shared ("static") value.

    int getAverageHeight() { // this is an instance method, btw
        return Person::averageHeight; // use `Person::` to unambiguously reference a static member of `Person`
    }

    Person()
    : height(0) {
        // instance members should be initialized in the constructor!
    }
}

// This will create an array of 10 people (10 different object instances).
// Each Person object (an instance) will have its own `height` in memory
Person* multiplePeople = new Person[10];

// btw, you probably should use `std::array` with an initializer instead:
// array<Person,10> multiplePeople{}; // <-- like this

// This sets a value to the `staticField` member, which exists only once in memory, that is, all Person instances share the same value for this member...
Person::averageHeight = 175; // 175cm

// ...for example:
assert( 175 == multiplePeople[3]->getAverageHeight() );
assert( 175 == multiplePeople[6]->getAverageHeight() );

// However instance members can have different values for each instance:
multiplePeople[3]->height = 170;
multiplePeople[6]->height = 180;

// Btw `height` is initialized to 0 in each Person's constructor.
assert( 170 != multiplePeople[0]->height );
assert( 180 != multiplePeople[7]->height );

＆＃13;

class MarkDownPreviewer extends React.Component {
  constructor(props) {
    super(props);
    this.state = {
      inputText: this.props.text
    };
    
    this.handleChange = this.handleChange.bind(this);
  }
  
   
  handleChange(event) {
    alert("a");
    this.setState({inputText: event.target.value});
  }
  
  render() {
    return (
      <div id="wrapper">
        <MarkDownInput text={this.state.inputText} onChange={this.handleChange}/>
        <MarkDownOutput output={this.state.inputText}/>
      </div>
    );
  }
}

class MarkDownInput extends React.Component {
  render() {
    return (
      <textarea className="input">{this.props.text}</textarea>
    );
  }
}

class MarkDownOutput extends React.Component {
  parseMarkup(rawInput) {
    var rawMarkup = marked(rawInput, {gfm: true, sanitize: true});
    return {__html: rawMarkup};
  }
  
  render() {
    return (
      <div className="output" dangerouslySetInnerHTML={this.parseMarkup(this.props.output)}>
        
      </div>
    );
  }
}

var previewText = '# Heading\n\n ## Sub-heading\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\nThe rain---not the reign---in\nSpain.\n\n *[Herman Fassett](https://freecodecamp.com/hermanfassett)*';

ReactDOM.render(
  <MarkDownPreviewer text={previewText} />, 
  document.getElementById('markpreview')
);

＆＃13;

html, body {
  height: 100%;
}

#markpreview {
  height: 100%;
}

#wrapper {
  display:flex;
  height: 100%;
}

.input {
  width: 50%;
  background-color: #e3e3e3;
  margin-right: 10px;
  padding: 10px;
}

.output {
  width: 50%;
  background-color: #f3f3f3;
  white-space: pre;
  padding: 10px;
}

＆＃13;

Answer 1

您未将onChange功能传递给textarea中的MarkDownInput组件，因此永远不会被调用。

改变这个：

<textarea className="input">{this.props.text}</textarea>

对此：

<textarea className="input" onChange={this.props.onChange}>{this.props.text}</textarea>

不会触发React JS onChange事件

1 个答案: