入力フィールドはreactjsで編集できません

Question

私はMarkdown Previewerを構築していますが、ユーザーが入力するとリアルタイムで入力して結果を見ることができるテキストエリアがありますが、テキストエリアを編集できないので苦労しています。私は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> 
    ); 
    } 
} 

ここで私はテキストエリアを定義しました。

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

問題状態を正しく更新していませんか。 setStateは値ではない関数なので、その関数を呼び出して、更新したいキーを持つオブジェクトを渡す必要があります。 SETSTATEチェックthis answerの詳細については

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

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

：

はこのようにそれを書きます。

は働い例えば jsfiddleを参照してください。 https://jsfiddle.net/g5e7akc6/ここ

Answer 2

を向上させることができる/間違っている複数のものです。

1. this.setState = { value: value }

this.setState関数であり、このthis.setState({ value: value })

ような使用ISTは 値引き成分中

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