React handleSubmit return 值到 dom

Question

我正在尝试编写一个非常基本的 MadLibs 游戏以了解有关 React.js 的更多信息，我运行遇到用户输入值（名称）和然后 handleSubmit returns 它到 dom。我这里好像漏了什么，不知道是什么。

我想这样做，当用户回答一个问题时，他们会在所有内容发布到 DOM 之前再问 2 个问题。

它既不发布也不工作，我没有错误知道发生了什么，它根本不会写入 DOM

我的代码是：

    class NameForm extends React.Component {
  constructor(props) {
    super(props);
    this.state = {
      value: 'start',
      newValue: '',
      submitted: false
    };

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

  handleChange(event) {
    this.setState({ value: event.target.value });
    event.preventDefault();
  }

  handleSubmit(event) {
    event.preventDefault();
    console.log('submit worked!!!');
    return <div>{this.state.value}</div>;
  }

  render() {
    return (
      <div
        style={{
          marginTop: '50px',
          color: 'white',
          top: '25px',
          position: 'absolute'
        }}
      >

        <form onSubmit={this.handleSubmit}>
          <label>
            Name:
            <input
              type="text"
              value={this.state.value}
              onChange={this.handleChange}
            />
          </label>
          <input type="submit" value="Submit" />
        </form>

      </div>
    );
  }
}

export default NameForm;

提前致谢

Answer 1

此代码不起作用的原因是因为您没有告诉 React 更新虚拟 DOM。在你的函数中你 return JSX，

return <div>{this.state.value}</div>;

但是 React 与此有什么关系？你必须告诉应用程序你想做什么。它可以通过几种方式完成（比如如果你使用的是 redux，我会推荐使用 reducer），但我会推荐条件渲染。在答案框中准确写出您需要的内容有点困难，所以这里有一个 link 可能比我解释得更好。如果您有任何问题，请告诉我，如果您真的需要一些代码示例，我会把它们写出来。

handleSubmit(event) {
    event.preventDefault();
    console.log('submit worked!!!');
    let toggle = this.state.visable; 
    this.setState({ visable: !toggle });
  }
  render() {
    const divStyle = {
      marginTop: '50px',
      color: 'white',
      top: '25px',
      position: 'absolute'
    };
    let question = null;
    const show = this.state.visable;
    if(show){
      question = <div>{this.state.value}</div> ; 
    }
    return (
      <div>
      <div  style={divStyle}>
        <form onSubmit={this.handleSubmit}>
          <label>
            Name:
            <input
              type="text"
              value={this.state.value}
              onChange={this.handleChange}
            />
          </label>
          <input type="submit" value="Submit" />
        </form>
        </div>
        <div>
          {question}
        </div>
      </div>
    );
  }

https://facebook.github.io/react/docs/conditional-rendering.html

Answer 2

我觉得你绑定错了。

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

这意味着您 this 的值将始终是父组件，而不是您尝试设置的 event.target.value。

只需删除这些行，它应该可以工作，因为 this 应该成为调用者上下文（例如输入字段），这意味着您的 event.target.value 应该正确获取和设置输入的内容。

此外，您不应在 handleSubmit 上返回，而应在 render() 方法中设置有条件呈现的内容，并且 handle submit 应设置一个状态属性，例如 hasSubmitted，您可以检查渲染以有条件地渲染表单或其他内容。

React handleSubmit return 值到 dom

React handleSubmit return value to dom

javascript

ecmascript-6

reactjs