javascript - 输入字段在reactjs中不可编辑

Question

我正在构建一个 Markdown 预览器，我有一个文本区域，用户可以在其中键入内容并在键入时实时查看结果，但我正在努力，因为文本区域无法编辑。我正在使用 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 是一个函数而不是一个值，您需要调用该函数并传递一个包含您要更新的键的对象。

这样写:

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

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

关于setState的详细检查 this answer .

有关工作示例，请参阅 jsfiddle:https://jsfiddle.net/g5e7akc6/