Fatal编程技术网
  • reactjs/
  • Reactjs 如何传递值以响应语义ui表单？

Reactjs 如何传递值以响应语义ui表单？

reactjs

Reactjs 如何传递值以响应语义ui表单？,reactjs,Reactjs,我正在尝试使用与添加新客户相同的表单编辑客户。我正在使用react语义ui表单 在Customer类中，单击Edit，它将调用onEditCustomer并从DB获取该客户详细信息。之后，我将获取的客户分配给“singleCustomer”，并希望传递到AddCustomer表单，以便在那里编辑客户详细信息 但在渲染中，它给了我错误 customerForm = <AddCustomer onAddFormSubmit={this.onAddFormSubmit} singleCustom

我正在尝试使用与添加新客户相同的表单编辑客户。我正在使用react语义ui表单

在Customer类中，单击Edit，它将调用onEditCustomer并从DB获取该客户详细信息。之后，我将获取的客户分配给“singleCustomer”，并希望传递到AddCustomer表单，以便在那里编辑客户详细信息 但在渲染中，它给了我错误

customerForm =
<AddCustomer onAddFormSubmit={this.onAddFormSubmit} singleCustomer={this.state.singleCustomer}/>

customerForm=
错误/警告是错误的

> Warning: Can't call setState on a component that is not yet mounted. This is a no-op, but it might 
indicate a bug in your application. Instead, assign to `this.state` directly or define a `state = 
{};` class property with the desired state in the AddCustomer component. 
in AddCustomer (at Customer.js:128)
in Customer (at App.js:10)
in App (at src/​index.js:7)


import React from 'react';
import { Table, Button } from 'semantic-ui-react';
import AddCustomer from './AddCustomer';

export default class Customer extends React.Component {

constructor(props) {
    super(props);
    this.state = {
        error: null,
        isLoaded: false,
        formClose:false,
        isAddCustomer:false,
        isEditCustomer:false,
        singleCustomer:[],
        users: []
    }
}

//fetch data 
componentDidMount() {

    const customerApi = 'https://localhost:44387/api/Customers';

    const myHeader = new Headers();
    myHeader.append('Content-type', 'application/json');
    myHeader.append('Accept', 'application/json');
    myHeader.append('Origin','https://localhost:44387');

    const options = {
        method: 'GET',
        myHeader
    };

    fetch(customerApi, options)
    .then(res => res.json())
    .then(
        (result) => {
            this.setState({
                users: result,
                isLoaded: true
            });
        },
        (error) => {
            this.setState({
                isLoaded: false,
                error
            });
        }
    )


}
//New Customer record
onAddFormSubmit = data => {

    const customerApi = 'https://localhost:44387/api/Customers';

    const myHeader = new Headers({
        'Accept':'application/json',
            'Content-type':'application/json'
    });

    fetch(customerApi,{
        method:'post',
        headers:myHeader,
        body:JSON.stringify(data)

    })
    .then(res => res.json())
    .then(
        (result) => {
            this.setState({
                users:result
            })
        },(error) => {
            this.setState({ error });
        }
    )
}

//Edit customer record
onEditCustomer = custId => {

    const customerApi = 'https://localhost:44387/api/Customers/'+custId;

    const myHeader = new Headers({
        'Accept':'application/json',
            'Content-type':'application/json; charset=utf-8'
    });

    fetch(customerApi,{
        method:'GET',
        headers:myHeader

    })
    .then(res => res.json())
    .then(
        (result) => {
            this.setState({
                singleCustomer:result,
                isEditCustomer:true,
                isAddCustomer:true
            })
        },(error) => {
            this.setState({ error });
        }
    )

}

//Delete Customer

onDeletCustomer = customerId => {
    const{users} = this.state;
    this.setState({
        users: users.filter(customer => customer.customerId !== customerId)
    });
}

render() {
    const { users } = this.state;

    console.log("Edit customer");

    let customerForm;
    if (this.state.isEditCustomer || this.state.isAddCustomer){
        customerForm = <AddCustomer onAddFormSubmit={this.onAddFormSubmit} singleCustomer= 
  {this.state.singleCustomer}/>
    }

    return (
        <div>
            {customerForm}
            <Table celled textAlign='center'>
                <Table.Header>
                    <Table.Row>
                        <Table.HeaderCell>ID</Table.HeaderCell>
                        <Table.HeaderCell>Name</Table.HeaderCell>
                        <Table.HeaderCell>Address</Table.HeaderCell>
                        <Table.HeaderCell>Action</Table.HeaderCell>
                        <Table.HeaderCell>Action</Table.HeaderCell>
                    </Table.Row>
                </Table.Header>

                <Table.Body >
                    {
                        users.map(user => (
                            <Table.Row key={user.customerId}>

                                <Table.Cell>{user.customerId}</Table.Cell>
                                <Table.Cell>{user.name}</Table.Cell>
                                <Table.Cell>{user.address}</Table.Cell>

                                <Table.Cell>
                                    <Button color='blue' onClick = 
          {()=>this.onEditCustomer(user.customerId)}>Edit</Button>
                                </Table.Cell>

                                <Table.Cell>
                                    <Button color='red' onClick = 
         {()=>this.onDeletCustomer(user.customerId)}>Delete</Button>
                                </Table.Cell>

                            </Table.Row>
                        ))
                    }
                </Table.Body>

                <Table.Footer>
                    <Table.Row>
                        <Table.HeaderCell colSpan='5'>
                            No of Pages
                    </Table.HeaderCell>
                    </Table.Row>
                </Table.Footer>
            </Table>

        </div>
    )
}

}


In AddCustomer I want to set data to form but my form is not opeing.

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,
        id: '',
        name: '',
        address: '',
        formData: {}
    }
    if (props.customer) {
        console.log("Add customer constructor")
        this.setState({showCreateForm:true})
        this.state.formData = props.customer;
    }else{
        this.setState({showCreateForm:false})
    }
}

handleChangeName = event => {
    const value = event.target.value;

    console.log(value);

    this.setState({ formData: { name: value, address: this.state.formData.address } });

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

handleChangeAddress = event => {
    const value = event.target.value;
    console.log(value);
    this.setState({ formData: { name: this.state.formData.name, address: value } });

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

handleSubmit = event => {
    event.preventDefault();

    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() {

    let formTitle;
    if (this.state.id) {
        formTitle = "Edit Customer";
    } else {
        formTitle = "New Customer";
    }

    return (
        <div>
            <Modal closeOnTriggerMouseLeave={false} trigger={
                <Button color='blue' onClick={this.openCreateCustomer}>
                    {formTitle}
        </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>
    )
}

}

>警告：无法对尚未安装的组件调用setState。这是一个禁止操作，但它可能
指出应用程序中的错误。相反，请直接分配给`this.state`或定义`state=
{};` 在AddCustomer组件中使用所需状态初始化属性。
in-AddCustomer（位于Customer.js:128）
在客户中（在App.js:10）
应用程序内（在src/​索引js:7）
从“React”导入React；
从“语义ui反应”导入{Table，Button}；
从“/AddCustomer”导入AddCustomer；
导出默认类Customer extends React.Component{
建造师（道具）{
超级（道具）；
此.state={
错误：null，
isLoaded:false，
formClose:错，
isAddCustomer：错，
顾客：错，
单一客户：[]，
用户：[]
}
}
//获取数据
componentDidMount（）{
常数customerApi=https://localhost:44387/api/Customers';
const myHeader=新的头（）；
append（'Content-type'，'application/json'）；
append（'Accept'，'application/json'）；
myHeader.append（'Origin'，'https://localhost:44387');
常量选项={
方法：“GET”，
我的头
};
获取（customerApi，选项）
.then（res=>res.json（））
.那么(
（结果）=>{
这是我的国家({
用户：结果，
isLoaded：正确
});
},
（错误）=>{
这是我的国家({
isLoaded:false，
错误
});
}
)
}
//新客户记录
onAddFormSubmit=数据=>{
常数customerApi=https://localhost:44387/api/Customers';
const myHeader=新的头文件({
“接受”：“应用程序/json”，
“内容类型”：“应用程序/json”
});
获取（customerApi{
方法：'post'，
标题：myHeader，
正文：JSON.stringify（数据）
})
.then（res=>res.json（））
.那么(
（结果）=>{
这是我的国家({
用户：结果
})
}，（错误）=>{
this.setState（{error}）；
}
)
}
//编辑客户记录
onEditCustomer=custId=>{
常数customerApi=https://localhost:44387/api/Customers/“+custId；
const myHeader=新的头文件({
“接受”：“应用程序/json”，
“内容类型”：“应用程序/json；字符集=utf-8”
});
获取（customerApi{
方法：'GET'，
标题：myHeader
})
.then（res=>res.json（））
.那么(
（结果）=>{
这是我的国家({
顾客：结果，
顾客：是的，
伊萨德顾客：是的
})
}，（错误）=>{
this.setState（{error}）；
}
)
}
//删除客户
onDeletCustomer=customerId=>{
const{users}=this.state；
这是我的国家({
用户：users.filter（customer=>customer.customerId！==customerId）
});
}
render（）{
const{users}=this.state；
控制台日志（“编辑客户”）；
让客户表现出来；
if（this.state.isEditCustomer | | this.state.isAddCustomer）{
客户执行=
}
返回(
{customerForm}
身份证件
名称
地址
行动
行动
{
users.map（user=>(
{user.customerId}
{user.name}
{user.address}
this.onEditCustomer（user.customerId）}>Edit
this.onDeletCustomer（user.customerId）}>Delete
))
}
页数
)
}
}
在AddCustomer中，我想将数据设置为表单，但表单未运行。
从“React”导入React；
从“语义ui反应”导入{按钮、表单、模式}；
导出默认类AddCustomer扩展React.Component{
建造师（道具）{
超级（道具）；
此.state={
showCreateForm:false，
id:“”，
名称：“”，
地址：''，
formData:{}
}
if（道具客户）{
log（“添加客户构造函数”）
this.setState（{showCreateForm:true}）
this.state.formData=props.customer；
}否则{
this.setState（{showCreateForm:false}）
}
}
handleChangeName=事件=>{
常量值=event.target.value；
console.log（值）；
this.setState（{formData:{name:value，address:this.state.formData.address}}）；
//姓名：“
//地址：“
console.log（this.state.formData）；
}
handleChangeAddress=事件=>{
常量值=event.target.value；
console.log（值）；
this.setState（{formData:{name:this.state.formData.name，address:value}）；
//名称：“ram”，但现在formData中没有地址
console.log（this.state.formData）；
}
handleSubmit=事件=>{
event.preventDefault（）；
这是我的国家({
表格数据：{
姓名：this.sta