Question

具有相同的组件，它将多次出现，当我更改一个组件中的任何一个时，所有组件的值都会自动更新。但是我想更改特定的组件值。因此，请告诉我如何使用onChange函数更新特定的组件值？

 import React, { Component } from "react";

 export default class ParentComponent extends Component {
     constructor(props){
         super( props);
         this.state= {
           queryPanelCounter: 3,
           fruit: 'A',
         }
     }

     handleChange = (event) => {
         this.setState({ [event.target.name]: event.target.value });
     }

     render(){
         let rawHtml= [];
         for(let i=0; i< this.state.queryPanelCounter; i++){
             rawHtml.push( 
                 <ReactExample name="fruit" value={this.state.fruit} 
      handleChange={this.handleChange} /> 
             );
         }

         return(
             <div>{rawHtml}</div>
         );
     }
 }

 export const ReactExample = ({ name, value, handleChange }) => (
     <select name={name} value={value} onChange={handleChange}>
         <option value="A">Apple</option>
         <option value="B">Banana</option>
         <option value="C">Cranberry</option>
     </select>
 )

Answer 1

这里您只有一个数据源fruit: 'A'。

因此，每当更改任何选择框时，所有选择框都会更改，因为所有引用的都是单个状态值。

一种方法是使数组处于状态，

this.state= {
    queryPanelCounter: 3,
    fruits: []   //You can define initial selected as ["A","B","C"]
}

然后，您需要将index作为道具传递给子组件，该子组件将在状态更新时使用。另外，最好将rawHtml逻辑用于呈现器之外的函数中以提高性能，

rawHtml = () => {
    let rawHtml= [];
    for(let i=0; i< this.state.queryPanelCounter; i++){
        rawHtml.push( 
            <ReactExample name="fruit" value={this.state.fruits[i]} handleChange={this.handleChange} ind={i}/>  //Pass ind here
        );
    }
    return rawHtml
}

您使用rawHtml函数，

<div>{this.rawHtml()}</div>

状态更新为

handleChange = (event, index) => {
  let fruits  = [...this.state.fruits];
  fruits[index] = event.target.value;
    this.setState({fruits});
}

最后，在子组件中，您需要传递索引以更新状态值，

const ReactExample = ({ name, value, handleChange, ind }) => (  //take index 
     <select name={name} value={value} onChange={(e) => handleChange(e,ind)}> //send ind to update state
         <option value="A">Apple</option>
         <option value="B">Banana</option>
         <option value="C">Cranberry</option>
     </select>
)

Demo

当单个组件更新时，为什么所有组件都会更新相同的值？

1 个答案: