Question

我有3个关于反应的问题。首先：如何使用按钮重置表单字段。其次：我用按钮点击他来删除用户，但是如何更改用户ID以使其从1到10？第三：必须有最多10个用户。我该怎么做才能阻止这个问题？

来自React的代码：jsfiddle.net/63mjaa3m/1 /

Answer 1

1）如何使用按钮重置表单字段？

您必须使用Controlled Components来处理值。例如，对于您的姓名字段：

<input onChange={this.handleNameChange} value={this.state.name} placeholder="Name..." type="text" autoFocus />

处理功能：

handleNameChange(event) {
  this.setState({ name: event.target.value });
}

最后，要重置值，请将此函数添加到组件中：

handleReset() {
  this.setState({ name: '', email: '' });
}

由于输入值是存储在您状态中的值，因此当您单击重置按钮时，它将重新启动它们：

<button onClick={this.handleReset}><u>Reset fields</u></button>

顺便说一下，在构造函数中记得绑定组件函数以避免丢失上下文：

this.handleNameChange = this.handleNameChange.bind(this);

有关详细信息，请参阅Handling Events。

2）其次：我是通过点击按钮删除用户，但如何更改用户ID以使其从1到10？

我不明白你想要达到的目的。

3）必须有最多10个用户。我该怎么做才能阻止这种情况发生？

以客户端方式执行此操作：

{this.state.response.length <= 10 &&
  <div className="adder">
    <button className="add" onClick={this.handleAdd} style={{display: this.state.add}}><p>+</p> Add user</button>
    <form id="form-reset" style={{display: this.state.form}}>
      <input onChange={this.handleName} placeholder="Name..." type="text" autoFocus />
      <input onChange={this.handleEmail} placeholder="E-mail..." type="text"/>
      <input value="Submit" onClick={this.handleSubmit} type="submit"/>
      <button onClick={this.handleReset}><u>Reset fields</u></button>
    </form>
  </div>
}

这样，只有在＆lt; = 10个用户时才会呈现添加逻辑。

Answer 2

这是已更改的source code

// reset form
handleReset(e) {
    this.setState({
        name: null,
      email: null
    })
}

然后将输入更改为contorlled模式

<input onChange={this.handleName} value={this.state.name} placeholder="Name..." type="text" autoFocus />

你做不到。用户的id是在服务器端生成的，你需要一个新的rest api来编辑它。
在handleSubmit和handleAdd中添加if条件。

如果没有服务器运行，您的代码将无法运行。所以我改变了数据获取的逻辑。数据提取应该放在componentDidMount中。

这是我改变的代码：

class Users extends React.Component {
    constructor(props){
        super(props);
        this.state = {
            response: false,
            add: "block",
            form: "none",
            name: null,
            email: null,
        };
        this.handleDelete = this.handleDelete.bind(this);
        this.handleAdd = this.handleAdd.bind(this);
        this.handleName = this.handleName.bind(this);
        this.handleEmail = this.handleEmail.bind(this);
        this.handleReset = this.handleReset.bind(this);
        this.handleSubmit = this.handleSubmit.bind(this);
    }
    getData() {
            new Promise(resolve => {
            setTimeout(() => {
            resolve([{
                id: 1,
              name: 'a',
              email: 'a@example.com'
            },{
                id: 2,
              name: 'b',
              email: 'b@example.com'
            },{
                id: 3,
              name: 'c',
              email: 'c@example.com'
            }])
          }, 500);
        })
        .then(data => this.setState({response:data}))
    }
    // fetch data in componentDidMount instead of componentWillMount.
    componentDidMount(){
        this.getData();
    }

    handleDelete(e) {
        new Promise(resolve => {
            setTimeout(resolve, 500);
        })
        .then(() => {
            this.setState(preState => {
            const newResponse = preState.response.filter(user => `${user.id}` !== `${e.target.parentElement.parentElement.id}`)
            return {
                response: newResponse
            }
            })
        })
    }

    handleAdd(e) {
            // maximum 10 users
            if (this.state.response.length < 10) {
          this.setState({
            add: "none",
            form: "block"
            })
        }
    }

    handleName(e) {
        this.setState({
            name: e.target.value
        })
    }

    handleEmail(e) {
        this.setState({
            email: e.target.value
        })
    }

    // reset form
    handleReset(e) {
        this.setState({
            name: null,
          email: null
        })
    }

    handleSubmit(e) {
        const re = /[a-zA-Z]+/;
        // maximum 10 users
        if (this.state.response.length < 10 && this.state.name && this.state.name.length < 20 && re.test(this.state.name)) {
            e.preventDefault();
            new Promise(resolve => {
                setTimeout(resolve, 500);
            }).then(() => {
                this.setState(preState => {
                const response = preState.response
                response.push({
                    id: response[response.length - 1].id + 1,
                  name: `${preState.name}`,
                  email: `${preState.email}`
                })
              })
            })
        } else {
            e.preventDefault();
        }
    }

    render(){
        if(this.state.response){
            return ( <div className="main"><div className="container">
                        <div className="adder">
                            <button className="add" onClick={this.handleAdd} style={{display: this.state.add}}><p>+</p> Add user</button>
                            <form id="form-reset" style={{display: this.state.form}}>
                                <input onChange={this.handleName} value={this.state.name} placeholder="Name..." type="text" autoFocus />
                                <input onChange={this.handleEmail} value={this.state.email} placeholder="E-mail..." type="text"/>
                                <input value="Submit" onClick={this.handleSubmit} type="submit"/>
                                <button onClick={this.handleReset}><u>Reset fields</u></button>
                            </form>
                        </div>
                       <table>
                           <tbody>
                                <tr>
                                    <th className="first">LP</th>
                                    <th>USER</th>
                                    <th>E-MAIL</th>
                                    <th className="last"></th>
                                </tr>
                                {this.state.response.map((elem)=>{
                return          <tr key={elem.id} id={elem.id}>
                                    <td className="first"><div>{elem.id}</div></td>
                                    <td>{elem.name}</td>
                                    <td>{elem.email}</td>
                                    <td className="delete"><button onClick={this.handleDelete}>X</button></td>
                        </tr>
                    })}
                           </tbody>
                    </table>
                </div></div>
            )
        }else {
            return null
        }
    }
}

/*
 * Render the above component into the div#app
 */
React.render(<Users />, document.getElementById('app'));

重新设置表单字段，更新用户ID并阻止最大用户数

2 个答案: