Je construis un Markdown Previewer et j'ai une zone de texte où l'utilisateur peut taper et voir le résultat en temps réel lors de la frappe, mais j'ai du mal car la zone de texte ne peut pas être modifiée. J'utilise markjs.

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>
    );
  }
}

Ici, j'ai défini la zone de texte.

 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>
    );
  }
}
1
Emud Ron 14 janv. 2017 à 16:26

2 réponses

Meilleure réponse

Le problème est que vous ne mettez pas à jour correctement l'état. setState est une fonction et non une valeur, vous devez appeler cette fonction et passer un objet avec la clé que vous souhaitez mettre à jour.

Écrivez-le comme ceci:

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

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

Pour plus d'informations sur setState, vérifiez cette réponse .

Consultez l 'jsfiddle exemple de travail: https://jsfiddle.net/g5e7akc6/

2
Mayank Shukla 26 févr. 2018 à 16:00

Voici plusieurs choses qui sont fausses / qui peuvent être améliorées.

  1. this.setState = { value: value }

this.setState est une fonction, utilisez ist comme ceci this.setState({ value: value })

  1. Dans le composant Markdown

    onChange(e) {
      var val = e.target.value;
      this.props.updateValue(val);
    }
    
0
webdeb 14 janv. 2017 à 13:32