Reactjs 如何在react中获取键值对的值？

我有以下情况： 一种表单，其中一个输入字段的值取决于下拉列表选择。示例：如果我选择“衬衫”，我想用衬衫图像的URL填充输入字段。我有以下代码。我需要帮助选择与用户选择相对应的正确值：

class ProductAdd extends React.Component{

constructor(){
    super();
    this.state = { defaultPrice: '$',
                    categoryValue: '',
                    URL: [
                        {
                            shirts: "https://www.istockphoto.com/photo/formal-shirt-with-button-down-collar-isolated-on-white-gm856917576-141225609",
                            jeans: "https://www.istockphoto.com/photo/blue-jeans-isolated-with-clipping-path-gm600373506-103229995",
                            jackets: "https://www.istockphoto.com/photo/black-hoodie-mock-up-gm695933044-128721993",
                            sweaters: "https://www.istockphoto.com/photo/formal-shirt-with-button-down-collar-isolated-on-white-gm856917576-141225609",
                            accessories: "https://www.shutterstock.com/image-vector/hair-accessories-woman-items-stylist-salon-1451306021"
                        }
                    ],
                };
    this.handleSubmit = this.handleSubmit.bind(this);
    this.handleChange = this.handleChange.bind(this);     
}

handleSubmit(e){
    e.preventDefault();
    const form = document.forms.productAdd;
    const product = {
        productName: form.productName.value, 
        category: form.category.value,
        price: form.price.value,
        image: form.image.value
        }
        this.props.createProduct(product);
        form.productName.value="";
        form.category.value="";
        form.price.value="";
        form.image.value="";
    }

handleChange(e){
    this.setState( { defaultPrice: e.target.value });
}



render(){
    let btnClass = [
        'btn',
        'clearfix'
      ]
      btnClass = btnClass.join(' ');

      Object.keys(this.state.URL).map(i => alert(this.state.URL['shirts']));

      //console.log(this.state.URL.shirts);

    return(
        <div>
            <form name="productAdd" onSubmit={this.handleSubmit} className="form">
                <div className="div1">
                    Category <br/>
                    <select name="category" className="selectBox"  onChange={ (e) => this.setState( { categoryValue: e.target.value }) }>
                        <option value="shirts">Shirts</option>
                        <option value="jeans">Jeans</option>
                        <option value="jackets">Jackets</option>
                        <option value="sweaters">Sweaters</option>
                        <option value="accessories">Accessories</option>
                    </select><br/><br/>
                    Product Name <br/>
                    <input type="text" name="productName" /><br/><br/>
                </div>
                <div className="div2">
                    Price Per Unit <br/>
                    <input ref="price" type="text" name="price" onChange={ this.handleChange } value={this.state.defaultPrice} /><br/><br/>                    
                    Image URL<br/>
                    <input type="text" name="image" value={this.state.URL[this.state.categoryValue]} /><br/><br/>
                </div>

                <button className={btnClass}>Add Product</button>
            </form>
    </div>
    );
}

class-ProductAdd扩展了React.Component{
构造函数（）{
超级（）；
this.state={defaultPrice:'$'，
类别值：“”，
网址：[
{
衬衫：“https://www.istockphoto.com/photo/formal-shirt-with-button-down-collar-isolated-on-white-gm856917576-141225609",
牛仔裤：“https://www.istockphoto.com/photo/blue-jeans-isolated-with-clipping-path-gm600373506-103229995",
夹克衫：“https://www.istockphoto.com/photo/black-hoodie-mock-up-gm695933044-128721993",
毛衣：“https://www.istockphoto.com/photo/formal-shirt-with-button-down-collar-isolated-on-white-gm856917576-141225609",
附件：“https://www.shutterstock.com/image-vector/hair-accessories-woman-items-stylist-salon-1451306021"
}
],
};
this.handleSubmit=this.handleSubmit.bind（this）；
this.handleChange=this.handleChange.bind（this）；
}
handleSubmit（e）{
e、 预防默认值（）；
const form=document.forms.productAdd；
常数乘积={
productName:form.productName.value，
类别：form.category.value，
价格：form.price.value，
图像：form.image.value
}
this.props.createProduct（产品）；
form.productName.value=“”；
表.类别.值=”；
form.price.value=“”；
form.image.value=“”；
}
手变（e）{
this.setState（{defaultPrice:e.target.value}）；
}
render（）{
设btnClass=[
“btn”，
“clearfix”
]
btnClass=btnClass.join（“”）；
Object.keys（this.state.URL）.map（i=>alert（this.state.URL['shirts']）；
//log（this.state.URL.shirts）；
返回(
类别

this.setState（{categoryValue:e.target.value}）}>
衬衫
牛仔裤
夹克
毛衣
配件



产品名称




每单位价格




图像URL




添加产品
);
}

---

}

您的

URL

道具是一个数组：

URL:[
{
衬衫：“https://www.istockphoto.com/photo/formal-shirt-with-button-down-collar-isolated-on-white-gm856917576-141225609",
牛仔裤：“https://www.istockphoto.com/photo/blue-jeans-isolated-with-clipping-path-gm600373506-103229995",
夹克衫：“https://www.istockphoto.com/photo/black-hoodie-mock-up-gm695933044-128721993",
毛衣：“https://www.istockphoto.com/photo/formal-shirt-with-button-down-collar-isolated-on-white-gm856917576-141225609",
附件：“https://www.shutterstock.com/image-vector/hair-accessories-woman-items-stylist-salon-1451306021"
}
]

因此，要么需要将其转换为对象（可以用作贴图），要么需要获取数组中的第一项，然后选择正确的条目

选项1

URL:{
衬衫：“https://www.istockphoto.com/photo/formal-shirt-with-button-down-collar-isolated-on-white-gm856917576-141225609",
牛仔裤：“https://www.istockphoto.com/photo/blue-jeans-isolated-with-clipping-path-gm600373506-103229995",
夹克衫：“https://www.istockphoto.com/photo/black-hoodie-mock-up-gm695933044-128721993",
毛衣：“https://www.istockphoto.com/photo/formal-shirt-with-button-down-collar-isolated-on-white-gm856917576-141225609",
附件：“https://www.shutterstock.com/image-vector/hair-accessories-woman-items-stylist-salon-1451306021"
}

选项2

this.state.URL[0][this.state.categoryValue]

---

如果您是Javascript新手，那么您可能会被方括号弄糊涂。Javascript非常不寻常，因为它可以包含变量。

谢谢，这很有帮助！