在 React 中使用 textarea 提交表单

Question

我有一个文本区域，我想在提交表单时将其字符串化为 JSON。我什至会满足于让函数设置 textarea 值。

import React from 'react';

export default class ClinicalMain extends React.Component {
  constructor(props) {
    super(props);
  }

  state = {selectedOption: ''}

  // my function to update the textarea
  reactStringify() {
    let obj = {
      name: "bob",
      age: 4
    }

    console.log('in stringify');
    let value = JSON.stringify(obj);
  }

  componentDidMount() { }

  render() {
    return (
      <React.Fragment>
        <form>
          <button type="button" 
                  onClick={this.reactStringify} 
                  id="reactid"
          >React stringify</button>
          <textarea value={this.value} 
                    defaultValue="" 
                    rows="10" cols="80"
          ></textarea>
          <br />
        </form>
      </React.Fragment>
    )
  }
}

let value 不会更新。我需要使用setState 吗？ this?

Answer 1

代码中有许多问题表明对优秀的React tutorial 缺乏熟悉。与任何图书馆一样，在深入研究之前有必要花时间阅读手册。

1. 不应直接修改状态。使用this.setState() 修改状态。 this.setState() 不能立即工作；它只是通知 React 库状态需要更新，React 会在它认为合适的时候自行处理更新。

   除此之外，let value = ... 是一个纯粹的局部变量，而不是类变量，所以无论如何this.value 在render 中都是未定义的；换句话说，上面的代码并没有试图以任何方式修改或访问state。

2. 尝试访问this 的类函数需要绑定。例如，onClick={this.reactStringify} 传递对this.reactStringify 函数的引用，但this 将在this.reactStringify 内部未定义，除非使用箭头函数（隐式绑定this），或者this 被显式绑定：

   this.handleChange = this.handleChange.bind(this);
   

   对于类组件，显式被认为是比箭头函数方法更好的做法，因为它只需要一次调用 bind。

3. React 通常使用名为 controlled components 的东西来监听文本字段的变化。这意味着元素的值会跟踪组件状态并充当唯一的事实来源。

虽然我不确定您最终想要完成什么，但这里有一个工作示例，可以让您再次行动起来，它演示了上述概念。

class ClinicalMain extends React.Component {
  constructor(props) {
    super(props);
    this.state = {value: ""};
    this.handleChange = this.handleChange.bind(this);
    this.handleSubmit = this.handleSubmit.bind(this);
  }
  
  handleChange(e) {
    this.setState({value: e.target.value});
  }

  handleSubmit(e) {
    e.preventDefault();
    this.setState(state => ({
      output: `you wrote: "${state.value}"`
    }));
  }

  render() {
    return (
      <React.Fragment>
        <form onSubmit={this.handleSubmit}>
          <textarea 
            value={this.state.value}
            onChange={this.handleChange}
          ></textarea>
          <input type="submit" value="Show output" />
        </form>
        <div>{this.state.output}</div>
      </React.Fragment>
    );
  }
}

ReactDOM.render(
  <ClinicalMain name="World" />,
  document.getElementById("app")
);

input {
  display: block;
}

form {
  margin-bottom: 0.4em;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/react/16.6.3/umd/react.production.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react-dom/16.6.3/umd/react-dom.production.min.js"></script>
<div id="app"></div>

以下是提供更多详细信息的文档的相关部分：

• State and Lifecycle
• Handling Events
• Forms