Question

我正在建立一个Markdown预览器，我有一个textarea，用户可以在键入时实时键入和查看结果，但我很难挣扎因为textarea无法编辑。我正在使用marksjs。

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

我在这里定义了textarea。

 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/

Answer 2

以下是一些错误/可以改进的事情。

this.setState = { value: value }

this.setState是一个函数，请使用类似this.setState({ value: value })

在Markdown组件中

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

在reactjs中输入字段不可编辑

2 个答案: