0

<ul>当我单击按钮时，我想将从表单的输入值编译的无序列表写入 a中Submit。它是基于类的组件中的受控形式。不幸的是，我还没有发现如何在没有钩子的情况下实现它。

export default  class  App extends React.Component {
    constructor(props) {
        super(props);
        
        this.state = {
            name: "",
            email: "",
            message: "",
            demo: "",
          };

        this.changeHandler = this.changeHandler.bind(this);
        this.submitFormHandler = this.submitFormHandler.bind(this);
    }

  
    changeHandler = (e)  => { 
        this.setState = {
            name: e.target.value,
            email: e.target.value,
            message: e.target.value,
            demo: ` 
      <li>${this.state.name}</li>
      <li>${this.state.email}</li>
      <li>${this.state.message}</li> `
      };
    this.setState(this.setState)
  };

    submitFormHandler = (e)  => { 
    e.preventDefault();
    // I guess the solution will be here somehow
    };
    
    render() { 
    return (
        <form  onSubmit={this.submitFormHandler} > 
            
            <label htmlFor="name">Name:</label>    <br/>
            <input id="name" type="text" value={this.state.name} onChange={this.changeHandler} />
            <br/>
            <label htmlFor="mail">E-mail:</label>    <br/>
            <input id="mail" type="email" value={this.state.email} onChange={this.changeHandler} />
            <br/>
            <label htmlFor="msg">Message:</label>    <br/>
            <textarea id="msg" type="email" value={this.state.message} onChange={this.changeHandler} />

            <h4>Values of the inputs:</h4>
            <ul id="demo">
                {this.state.demo}  {/* the list would be here! */}
            </ul>
            <button type="submit">Submit</button>
            
        </form>
        );  }
};
4

1 回答 1

0

为了在提交时显示某些内容，我会制作一个isSubmitted标志。您控制的输入也不起作用。当输入ids与names状态相对应时，我们可以更轻松地在 onChange 处理函数中处理它们。此外，当它被提交时，我们可以阻止用户更新数据changeHandler并提前返回。所以我在下面的代码中修复了它：

// import React from 'react';

class App extends React.Component {
  constructor(props) {
    super(props);

    this.state = {
      name: '',
      email: '',
      message: '',
      isSubmitted: false,
    };

    this.changeHandler = this.changeHandler.bind(this);
    this.submitFormHandler = this.submitFormHandler.bind(this);
  }

  changeHandler = ({ target }) => {
    if (this.state.isSubmitted) return;

    this.setState({ [target.id]: target.value });
  };

  submitFormHandler = (e) => {
    e.preventDefault();
    this.setState({ isSubmitted: true });
  };

  render() {
    return (
      <div>
        <form onSubmit={this.submitFormHandler}>
          <label htmlFor="name">Name:</label> <br />
          <input
            id="name"
            type="text"
            value={this.state.name}
            onChange={this.changeHandler}
          />
          <br />
          <label htmlFor="email">E-mail:</label> <br />
          <input
            id="email"
            type="email"
            value={this.state.email}
            onChange={this.changeHandler}
          />
          <br />
          <label htmlFor="message">Message:</label> <br />
          <textarea
            id="message"
            type="email"
            value={this.state.message}
            onChange={this.changeHandler}
          />
          <br />
          <button type="submit">Submit</button>           
        </form>            
        {this.state.isSubmitted && (
          <React.Fragment>
            <h4>Values of the inputs:</h4>
            <ul>
              <li>{this.state.name}</li>
              <li>{this.state.email}</li>
              <li>{this.state.message}</li>
            </ul>
          </React.Fragment>
        )}
      </div>
    );
  }
}

ReactDOM.render(<App />, document.getElementById('root'));
<script src="https://cdnjs.cloudflare.com/ajax/libs/react/17.0.1/umd/react.production.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react-dom/17.0.1/umd/react-dom.production.min.js"></script>
<div id="root"></div>

于 2022-02-13T20:41:18.627 回答