如何在ReactJs/.Net中将我的状态传递给这个类组件？

长期潜伏者，第一次海报

我按照教程制作了一个带有ReactJs前端（）的Asp.Net核心MVC应用程序。在完成教程后，我一直在向项目中添加其他功能，以了解我还可以用它做些什么

我的

组件组装了一个

对象，并通过

XmlHttpRequest

将其发送到我的API控制器，该控制器将其保存到本地存储。控制器的

submitur

通过道具传入。这很有效

此后，我尝试将

组件添加到

中呈现的每个着色节点中，我打算以与

组件大致相同的方式来处理这些节点。

中呈现的每个colorNode都有自己的删除按钮，我希望

组件从所选颜色中获取

color.id

，并将其传递给API控制器上的softDelete操作，以便依次处理（它将按id查找颜色并向其附加DateDeleted，然后API将忽略

DateDeleted！=null

）的任何颜色，

组件随后可以调用

LoadColorsFromServer（）

从存储中带回刷新的列表。我希望

以与添加表单相同的方式从props接收

softDeleteUrl

当我在调试中运行项目时，

softDeleteUrl

是未定义的，当我在浏览器中检查道具时，它不包含

softDeleteUrl

。还有“颜色”是未定义的，所以我觉得我的

组件没有接收到道具或状态。我对道具/状态绑定的反应和概念上的挣扎还不太熟悉，所以我怀疑这是我问题的根源

如何将softDeleteUrl和颜色属性从要删除的

中传递到

组件？是否需要调用类似

的东西

我对此有点不知所措，任何建议都将不胜感激

谢谢

杰德

类colorDisplay扩展了React.Component{
建造师（道具）{
超级（道具）；
this.state={data:[]}；
this.handleColourSubmit=this.handleColourSubmit.bind（this）；
}
loadcolorsfromserver（）{
const xhr=new XMLHttpRequest（）；
xhr.open（'get'，this.props.url，true）；
xhr.onload=（）=>{
const data=JSON.parse（xhr.responseText）；
this.setState（{data:data}）；
};
xhr.send（）；
}
handleColourSubmit（彩色）{
const data=新表单数据（）；
data.append（'name'，color.name）；
数据。附加（‘品牌’、颜色、品牌）；
数据。附加（“到期日”、颜色。到期日）；
data.append（'serialNumber'，color.serialNumber）；
const xhr=new XMLHttpRequest（）；
xhr.open（'post'，this.props.submitur，true）；
xhr.onload=（）=>this.loadcolorsfromserver（）；
发送（数据）；
}
componentDidMount（）{
this.loadcolorsfromserver（）；
}
render（）{
返回(
颜色
);
}
}
类colorlist扩展了React.Component{
render（）{
const colorNodes=this.props.data.map（color=>）
品牌：{color.Brand}
Exp:{color.expiration}
序列号：{color.serialNumber}
添加日期：{color.dateAdded}
));
返回{colorNodes}；
}
}
类SoftDeleteColor.Component{
建造师（道具）{
超级（道具）
此.state={
颜色：这个。道具。颜色
};
}
手持设备（彩色）{
var xhr=new XMLHttpRequest（）；
var url=this.props.softDeleteUrl+color.id；
xhr.open（'DELETE'，url，true）；
xhr.onreadystatechange=（）=>{
如果（xhr.status==204）{
this.loadcolorsfromserver（）；
}
}
xhr.send（）；
}
render（）{
报税表（
{this.handleDelete（this.state.color）；}>删除
)
}
}
类AddColorForm扩展了React.Component{
建造师（道具）{
超级（道具）；
this.state={name:''，brand:''，expiration:''，serialNumber:''}；
this.handleNameChange=this.handleNameChange.bind（this）；
this.handleBrandChange=this.handleBrandChange.bind（this）；
this.handleExpiryChange=this.handleExpiryChange.bind（this）；
this.handleSerialNumberChange=this.handleSerialNumberChange.bind（this）；
this.handleSubmit=this.handleSubmit.bind（this）；
}
手形变化（e）{
this.setState（{name:e.target.value}）；
}
车把更换（e）{
this.setState（{brand:e.target.value}）；
}
handleExpiryChange（e）{
this.setState（{expiry:e.target.value}）；
}
HandleSerialNumber更改（e）{
this.setState（{serialNumber:e.target.value}）
}
handleSubmit（e）{
e、 预防默认值（）；
const name=this.state.name.trim（）；
const brand=this.state.brand.trim（）；
const expiry=this.state.expiry.trim（）；
const serialNumber=this.state.serialNumber.trim（）；
如果（！名称| | |！品牌| |！到期日| |！序列号）{
返回；
}
this.props.oncloursubmit({
姓名:姓名,，
品牌:品牌,，
到期日：到期日，
serialNumber:serialNumber
})
这是我的国家({
名称：“”，
品牌：''，
到期日：''，
序列号：“”
});
}
render（）{
返回(
在列表中添加颜色
class ColourDisplay extends React.Component {
    constructor(props) {
        super(props);
        this.state = { data: [] };
        this.handleColourSubmit = this.handleColourSubmit.bind(this);
    }
    loadColoursFromServer() {
        const xhr = new XMLHttpRequest();
        xhr.open('get', this.props.url, true);
        xhr.onload = () => {
            const data = JSON.parse(xhr.responseText);
            this.setState({ data: data });
        };
        xhr.send();
    }
    handleColourSubmit(colour) {
        const data = new FormData();
        data.append('name', colour.name);
        data.append('brand', colour.brand);
        data.append('expiry', colour.expiry);
        data.append('serialNumber', colour.serialNumber);

        const xhr = new XMLHttpRequest();
        xhr.open('post', this.props.submitUrl, true);
        xhr.onload = () => this.loadColoursFromServer();
        xhr.send(data);
    }
    componentDidMount() {
        this.loadColoursFromServer();
    }
    render() {
        return (
            <div className="colourDisplay">
                <h1>Colours</h1>
                <ColourList data={this.state.data}/>
                <AddColourForm onColourSubmit={this.handleColourSubmit}/>
            </div>
        );
    }
}

class ColourList extends React.Component {
    render() {
        const colourNodes = this.props.data.map(colour => (            
            <Colour name={colour.name} key={colour.id}>
                <div>Brand: {colour.brand}</div>
                <div>Exp: {colour.expiry}</div>
                <div>Serial #: {colour.serialNumber}</div>
                <div>Date Added: {colour.dateAdded}</div>
                <SoftDeleteColour />
            </Colour>
        ));
        return <div className="colourList">{colourNodes}</div>;
    }
}

class SoftDeleteColour extends React.Component {
    constructor(props) {
        super(props)
        this.state = {
            colour: this.props.colour
        };
    }
    HandleDeletion(colour) {
        var xhr = new XMLHttpRequest();
        var url = this.props.softDeleteUrl + colour.id;
        xhr.open('DELETE', url, true);

        xhr.onreadystatechange = () => {
            if (xhr.status == 204) {
                this.loadColoursFromServer();
            }
        }
        xhr.send();
    }
    render() {
        return (         
            <button onClick={() => { this.HandleDeletion(this.state.colour); }}>Delete</button>              
        )
    }
}

class AddColourForm extends React.Component {
    constructor(props) {
        super(props);
        this.state = { name: '', brand: '', expiry: '', serialNumber: '' };
        this.handleNameChange = this.handleNameChange.bind(this);
        this.handleBrandChange = this.handleBrandChange.bind(this);
        this.handleExpiryChange = this.handleExpiryChange.bind(this);
        this.handleSerialNumberChange = this.handleSerialNumberChange.bind(this);
        this.handleSubmit = this.handleSubmit.bind(this);
    }
    handleNameChange(e) {
        this.setState({ name: e.target.value });
    }
    handleBrandChange(e) {
        this.setState({ brand: e.target.value });
    }
    handleExpiryChange(e) {
        this.setState({ expiry: e.target.value });
    }
    handleSerialNumberChange(e) {
        this.setState({ serialNumber: e.target.value })
    }
    handleSubmit(e) {
        e.preventDefault();
        const name = this.state.name.trim();
        const brand = this.state.brand.trim();
        const expiry = this.state.expiry.trim();
        const serialNumber = this.state.serialNumber.trim();
        if (!name || !brand || !expiry || !serialNumber) {
            return;
        }
        this.props.onColourSubmit({
            name: name,
            brand: brand,
            expiry: expiry,
            serialNumber: serialNumber
        })
        this.setState({
            name: '',
            brand: '',
            expiry: '',
            serialNumber: ''
        });
    }
    render() {
        return (
            <form className="addColourForm" onSubmit={this.handleSubmit}>
                <h2>Add a colour to your list</h2>
                <div>
                    <input
                        type="text"
                        placeholder="Colour"
                        value={this.state.name}
                        onChange={this.handleNameChange}
                    />
                </div>
                <div>
                    <input
                        type="text"
                        placeholder="Brand"
                        value={this.state.brand}
                        onChange={this.handleBrandChange}
                    />
                </div>                
                <div>
                    <input
                        type="text"
                        placeholder="Expiry MM/YY"
                        value={this.state.expiry}
                        onChange={this.handleExpiryChange}
                    />
                </div>
                <div>
                    <input
                        type="text"
                        placeholder="Serial #"
                        value={this.state.serialNumber}
                        onChange={this.handleSerialNumberChange}
                    />
                </div>
                <input type="submit" value="Post" />              
            </form>           
        );
    }
}

class Colour extends React.Component {
    render() {
        return (
            <div className="colour">
                <h2 className="colourName">{this.props.name}</h2>
                {this.props.children}               
            </div>
        );
    }
}

ReactDOM.render(
    <ColourDisplay
        url="/colours"
        submitUrl="/colours/new"
        softDeleteUrl="/colours/softDelete"
    />,
    document.getElementById('content')
);