如何将状态用于多个值？

Posted 2023-02-23

【中文标题】如何将状态用于多个值？

【英文标题】：how can I use state for multiple value?

【发布时间】：2020-06-17 14:19:27

【问题描述】：

我试图在我的 Add Customer JS 中使用两种状态，一种用于隐藏表单，第二种用于 JSON。

我想使用 form-State 来隐藏单击取消按钮时的表单以及 JSON 的初始状态。

我想做这样的事情 Is it possible to have two states in one react component

import React from 'react';
import  Button, Form, Modal  from 'semantic-ui-react';

export default class AddCustomer extends React.Component 

constructor(props) 
    super(props);
    this.state = 
        showCreateForm:false,
        formData:
            name: '',
            address: ''
        
    
    this.handleChangeName = this.handleChangeName.bind(this);
    this.handleChangeAddress = this.handleChangeAddress.bind(this);
    this.handleSubmit = this.handleSubmit.bind(this);


handleChangeName(event) 
    const value = event.target.value;

    console.log(value);

    this.setState(formData:name:value);

    //name: ""
    //address: ""
    console.log(this.state.formData);


handleChangeAddress(event) 
    const value = event.target.value;
    console.log(value);
    this.setState(formData:address:value);

    //name: "ram" but now there is no address in formData
    console.log(this.state.formData);


handleSubmit(event) 
    event.preventDefault();

    ////address: "aaaaa" now there no name in formData
    console.log(this.state.formData);

    this.setState(formData:
        name:this.state.name, address:this.state.address
    );
    this.props.onAddFormSubmit(this.state.formData);


//On cancel button click close Create user form
closeCreateForm = () => 
    this.setState( showCreateForm: false )


//Open Create new Customer form
openCreateCustomer = () => 
    this.setState( showCreateForm: true )


render() 

    return (
        <div>
            <Modal closeOnTriggerMouseLeave=false trigger=
                <Button color='blue' onClick=this.openCreateCustomer>
                    New Customer
        </Button>
             open=this.state.showCreateForm>
                <Modal.Header>
                    Create customer
    </Modal.Header>
                <Modal.Content>
                    <Form onSubmit=this.handleSubmit>

                        <Form.Field>
                            <label>Name</label>
                            <input type="text" placeholder ='Name' name = "name"
                                value = this.state.name 
                                onChange = this.handleChangeName/>
                        </Form.Field>

                        <Form.Field>
                            <label>Address</label>
                            <input type="text" placeholder ='Address' name = "address"
                                value = this.state.address
                                onChange = this.handleChangeAddress/>
                        </Form.Field>
                        <br/>
                        <Button type='submit' floated='right' color='green'>Create</Button>
                        <Button floated='right' onClick=this.closeCreateForm color='black'>Cancel</Button>
                        <br/>
                    </Form>

                </Modal.Content>
            </Modal>

        </div>
    )

【问题讨论】：

试试钩子的概念。

【参考方案1】：

你可以直接在构造函数上给出初始状态。例如

this.state =showCreateForm: false, formModel:name:'abc', address:'xyz'

是的，从技术上讲，您可以拥有多个状态变量。

【讨论】：

是的，这就是这样做的方式。顺便说一句，我认为他应该从返回函数中提取一些组件。所有这些语义化的 UI 组件在一次返回中变得难以阅读。

@K4R1 谢谢你，你能告诉我如何提取。我是新手，所以这对我有很大帮助。

@RahulWaghmare 对于初学者，我建议阅读他们网站上的官方 React 文档：reactjs.org/docs/… 和 reactjs.org/docs/…

@RahulWaghmare 这里还有一段 Youtube 视频，涵盖了提取过程：youtube.com/watch?v=5H7GIZO-5Rk

【参考方案2】：

正如已经提到的，是的，您可以在构造函数中执行此操作。但是，您可以更进一步，将其声明为类成员。如下：

export default class Customer extends React.Component 
  state = 
    showCreateForm: false,
    form: 
      name: "",
      address: "",
    
  

  constructor(props) 
    super(props);
    this.handleChange = this.handleChange.bind(this);
    this.handleSubmit = this.handleSubmit.bind(this);
  

  handleSubmit(event) 
    event.preventDefault();
    this.props.onAddFormSubmit(this.state.form);
    this.setState(
      ...this.state,
      form: 
        name: "",
        address: "",
      
    );
  



  // ...

  render() 
    return (
      <div>
        <Modal
          closeOnTriggerMouseLeave=false
          trigger=
            <Button color="blue" onClick=this.openCreateCustomer>
              New Customer
            </Button>
          
          open=this.state.showCreateForm
        >
          <Modal.Header>Create customer</Modal.Header>
          <Modal.Content>
            <Form onSubmit=this.handleSubmit>
              <Form.Field>
                <label>Name</label>
                <input
                  type="text"
                  placeholder="Name"
                  name="name"
                  value=this.state.form.name
                  onChange=this.handleChange
                />
              </Form.Field>
              <Form.Field>
                <label>Address</label>
                <input
                  type="text"
                  placeholder="Address"
                  name="address"
                  value=this.state.form.address
                  onChange=this.handleChange
                />
              </Form.Field>
              <br />
              <Button type="submit" floated="right" color="green">
                Create
              </Button>
              <Button
                floated="right"
                onClick=this.closeCreateForm
                color="black"
              >
                Cancel
              </Button>
              <br />
            </Form>
          </Modal.Content>
        </Modal>
      </div>
    );
  

【讨论】：

谢谢，请告诉我。我应该在表单中做什么。

Name

@RahulWaghmare 你的意思是这样的吗^^？我进行了修改。

是的。你能告诉我如何在handleChange(event)中做同样的事情

当我打开表单并开始绑定时，handleChange 错误出现错误 - “组件正在将文本类型的受控输入更改为不受控制”