Eingabefeld ist nicht editierbar in reactjs

Question

Ich baue eine Markdown Previewer und ich habe eine Textarea, wo der Benutzer tippen und sehen Sie das Ergebnis in Echtzeit bei der Eingabe, aber ich habe Probleme, weil die Textbereich kann nicht bearbeitet werden. Ich benutze markedjs.

class Previewer extends Component { 
constructor(props) { 
    super(props); 
    this.state = { 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\nUnordered 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 *[David Dume](https://www.freecodecamp.com/dumed)*' }; 

    this.updateValue = this.updateValue.bind(this); 
    } 
    updateValue(val) { 
    this.setState = { value: val }; 
    } 
    markup(text) { 
    var markup = marked(text, { sanitize: true }); 
    return { __html: markup} 
    } 
    render() { 
    return (
     <div className='row'> 
     <div className='col-md-6'> 
      <Markdown value={this.state.value} updateValue={this.updateValue} /> 
     </div> 
     <div className='col-md-6'> 
      <span dangerouslySetInnerHTML={this.markup(this.state.value)} /> 
     </div> 
     </div> 
    ); 
    } 
} 

Hier habe ich das Textfeld definiert.

class Markdown extends Component { 
    constructor(props) { 
    super(props); 

    this.onChange = this.onChange.bind(this); 
    } 
    onChange(e) { 
    var textarea = reactDOM.findDOMNode(this.refs.textarea); 
    var val = textarea.value; 
    this.props.updateValue(val); 
    } 
    render() { 
    return (
     <div className={this.props.className}> 
     <textarea rows='22' type='text' value={this.props.value} ref='textarea' className='form-control' onChange={this.onChange} /> 
     </div> 
    ); 
    } 
} 

Answer 1

Problem ist, dass Sie den Status nicht ordnungsgemäß aktualisieren. setState ist eine Funktion und kein Wert. Sie müssen diese Funktion aufrufen und ein Objekt mit dem Schlüssel übergeben, den Sie aktualisieren möchten.

schreiben es so:

updateValue(val) { 
    this.setState({ value: val }); 
} 

onChange(e) { 
    var val = e.target.value; 
    this.props.updateValue(val); 
} 

Einzelheiten zu setState Check this answer.

Siehe jsfiddle für das Arbeitsbeispiel: https://jsfiddle.net/g5e7akc6/

Answer 2

Hier mehrere Dinge, die falsch sind/verbessert werden kann.

1. this.setState = { value: value }

this.setState ist eine Funktion, die Verwendung ist wie dieser this.setState({ value: value })

2. In Markdown-Komponente

   onChange(e) { 
       var val = e.target.value; 
       this.props.updateValue(val); 
   }