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

Answer 2

使用e.preventDefault()的另一种方法是将按钮标记为type="button"，<form>元素内的默认值为type="submit"，它会自动提交表单/刷新页面

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

设置“ type =“ button”表示按钮仅在此处触发一些JavaScript操作，而不是提交表单。

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

2 个答案: