Question

如何在React JS onClick中重置表单中的值？

class AddFriendForm extends Component {
  constructor(props) {
   super(props)
   this.state = {
     firstname: '',
     lastname: '',
   }
 }

 render() {
    const { addFriend } = this.props

   const setFirstName = add => this.setState({ firstname: add.target.value })
   const setLastName = add => this.setState({ lastname: add.target.value })

return (
  <div>
    <div>
      <Label label="First Name" />
      <Field onChange={setFirstName} />

      <Label label="Last Name" />
      <Field onChange={setLastName} />

      <SecondaryButton
        name="Search"
        onClick={() => addFriend(this.state)}
      />

   <SecondaryButton
      name="Reset"
      onClick={() => ???}
      />
    </div>
  </div>
)
 }
}

当用户按下Reset按钮时，我想要一个onClick事件，它将表单中的所有字段重置为空白。是否有一行代码可以执行此操作？

Answer 1

首先，创建一个名为resetForm

的函数

resetForm = () => {
   this.setState({
       ...this.state,
       firstname: '',
       lastname: ''
   })
}

然后在单击重置按钮时触发该功能

onClick={this.resetForm}

干杯队友

编辑：

您必须将值分配给＆＃34; Field＆＃34;使用value = {this.state.firstname}

<Field value={this.state.firstname} onChange={...

小提示：不要在jsx代码中定义函数。

Answer 2

你可以像这样简单地做到这一点。

在 render() 之前添加以下部分。这是一个重置字段的函数。

      reset = () => {
      this.setState({ firstname: ''})
      this.setState({ lastname: ''})
  }

这是调用函数的地方。（在按钮 onPress 中。）

<Button 
    title='reset'
    style={styles.button}
    onPress={this.reset}
    >
</Button>

Answer 3

注意：- 在功能组件中使用这个。

const handleReset = (e) => {
    e.preventDefault();
    setState(prevState => ({
        ...prevState,
        name: '',
        email: '',
        password: ''
    }))
}

React JS如何重置表单

3 个答案: