javascript - 在React中动态添加输入标签，显示一会儿然后消失

Question

我想做的是能够动态添加输入字段。 例如，一旦你满足了你的第一个爱好，你就会决定添加另一个爱好。单击“添加”，将显示一个新的输入字段。 输入字段瞬间显示然后消失。

代码:

class App extends React.Component {
  state = {
    Hobbies: []
  }

  addHobby = () => {
    this.setState(prevState => ({ Hobbies: [...prevState.Hobbies, ''] }))

  }

  handleChange(i, event) {
    let Hobbies = [...this.state.Hobbies];
    Hobbies[i] = event.target.value;
    this.setState({ Hobbies });
  }

  removeClick(i) {
    let Hobbies = [...this.state.Hobbies];
    Hobbies.splice(i, 1);
    this.setState({ Hobbies });
  }

  render() {
    const widthStyle = {
      width: '15rem'
    };



    return (
      <div className="App">
        <form >
          <label>
            Hobbies:
          <input type="text" name="hobby" />
          </label>
          <br /><br />

          {
            
            this.state.Hobbies.map((el, i) => {
              return (
                <div key={i}>
                  <input type="text" value={el || ''} onChange={this.handleChange.bind(this, i)} />
                  <input type='button' value='remove' onClick={this.removeClick.bind(this, i)} />
                </div>
              )
            })
          }

          <button onClick={this.addHobby.bind(this)}>ADD Hobby</button>
        </form>

       
      </div>
    );
  }
}

ReactDOM.render(<App />, document.getElementById('container'));

Answer 1

问题是您在表单内单击，这就是您的页面刷新(表单提交)并且丢失状态的原因

addHobby = (e) => {
  e.preventDefault() //<-----
  this.setState({ Hobbies: [...this.state.Hobbies, ''] })
}

CodeSandbox