Javascript 在reactjs中，输入字段不可编辑

我正在构建一个降价预览器，我有一个文本区域，用户可以在其中键入内容，并在键入时实时查看结果，但我正在努力，因为文本区域无法编辑。我正在使用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>
    );
  }
}

类预览器扩展组件{
建造师（道具）{
超级（道具）；
此.state={value:'Heading\n===\n\nSub Heading\n------\n\n\n\n另一个较深的标题\n\n用一个空行分隔。\n\n在一行末尾留出两个空格以进行换行\n\n文本属性*斜体*，**粗体**，`monospace`，~~删除线~.\n\n\n未排序的列表：\n\n\n*苹果\n*橙子\n*梨\n\n已排序的列表：\n\n\n\n.苹果\n 2.橙子\n 3.梨\n\n雨---而不是统治时期---在潘。\n\n*[大卫·杜姆](https://www.freecodecamp.com/dumed)*' };
this.updateValue=this.updateValue.bind（this）；
}
更新值（val）{
this.setState={value:val}；
}
标记（文本）{
var markup=marked（文本，{sanitize:true}）；
返回{uuuuhtml:markup}
}
render（）{
返回(
);
}
}

这里我定义了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>
    );
  }
}

类降价扩展组件{
建造师（道具）{
超级（道具）；
this.onChange=this.onChange.bind（this）；
}
onChange（e）{
var textarea=reactDOM.findDOMNode（this.refs.textarea）；
var val=textarea.value；
this.props.updateValue（val）；
}
render（）{
返回(
);
}
}

问题是您没有正确更新状态。

setState

是一个函数而不是一个值，您需要调用该函数并传递一个带有要更新的键的对象

这样写：

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

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

有关设置状态检查的详细信息，请参见

---

参见

jsfiddle

了解工作示例：

这里有许多错误的地方/可以改进的地方

this.setState={value:value}

this.setState

是一个函数，像这样使用ist

this.setState（{value:value}）

在降价组件中

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