react.js - 如何在動態生成的按鈕上成功添加元素？

Question

我有動態生成的文本框和按鈕的組件。每個按鈕都會執行ajax請求。這一切都工作正常。但是，我想在按鈕本身上顯示成功消息或錯誤消息，並在其上添加一些圖標。這是我卡住的地方。我設置了標誌並更改了狀態，但它會按預期在所有按鈕上更改。我也試圖改變目前的目標，但是參考並沒有成功回調。有人可以幫助我這個。

const FormGroup = ({index, type, field, value, onChange, spinner, isLoading, error, buttonType, brandList, handleBrandConfiguration, checkAvailability, handleCaseType, options, handlerRemoveItem})=> { 
    return(
    <div> 
     <div className="form-group"> 
     <label>{index}</label> 
     <input type="text" 
      name={field} 
      className="form-control" 
      value={value} 
      onChange={onChange} 
      /> 
      <select className="form-control" defaultValue="" onChange={handleBrandConfiguration}> 
      <option value="">Please select brand</option> 
      {brandList} 
      </select> 
     <select className="form-control" defaultValue="" onChange={handleCaseType}> 
      <option value="">Please select case template</option> 
      {options} 
     </select> 
     <button 
      type={buttonType} 
      className={classname(isLoading ? error ? "button button-danger" : "button button-success" : error ? "button button-danger" : "button button-primary")} 
      onClick={checkAvailability}> 
      <i className={classname(spinner ? error ? '': "fa fa-spinner fa-spin": '')}></i> {isLoading ? error ? 'Not Found' :<i className="fa fa-check fa-2" aria-hidden="true"></i> : error ? 'Not Found': 'Check Availability'}</button> 
     <input 
      type="button" 
      className="button button-danger" 
      value="Remove Item" 
      onClick={handlerRemoveItem}/> 
     </div> 
     </div> 
); 
}; 

感謝

Answer 1

如果您移動checkAvailability和API請求FormControl組件，您可以設置錯誤和成功的單一組分的結果。

例如：

class FormGroup extends React.Component{ 
    constructor(props) { 
    super(props); 
    this.state = { 
     availabilityResult: null 
    }; 
    } 
    callApi(username){ 
    return(axios.get('https://api.github.com/users/' + username)); 
    } 
    onChange(e){ 
    this.setState({ 
     itemCode: e.target.value 
    }); 
    } 

    checkAvailability(e){ 
    const username = this.state.itemCode; 
    let currentValue = e.currentTarget.value; 
    //ajax call goes here 
    this.callApi(username).then(response => { 
     const login = response.data.login; 
     this.setState({ 
     availabilityResult: (login === 'mesmerize86') 
     }); 
    }).catch(err => { 
     console.log(err); 
    }); 
    } 

    render() { 
    const {index, field, value, handleRemoveItem} = this.props; 
    let inputState = ''; 
    if (this.state.availabilityResult === true) inputState = 'button-success'; 
    else if (this.state.availabilityResult === false) inputState = 'button-danger'; 

    return(
     <div className="form form-inline"> 
     <div className="form-group"> 
      <label>{index}</label> 
      <input type="text" 
      name={field} 
      className="form-control" 
      value={value} 
      onChange={this.onChange.bind(this)} 
      /> 
      <input 
      type="button" 
      className={`button button-primary ${inputState}`} 
      value="Check Availability" 
      onClick={this.checkAvailability.bind(this)} /> 
      <input 
       type="button" 
       className="button button-danger" 
       value="Remove Item"/> 
      </div> 
      </div> 
     )  
     } 
    } 


    class Main extends React.Component { 
     constructor(props){ 
     super(props); 
     this.state = { 
      rowList : [], 
      itemCodes: [], 
      itemCode: '' 
     } 
     } 
     handlerAddRow(){ 
     const rowList = this.state.rowList.concat(FormGroup); 
     this.setState({ rowList }); 
     }  
     handleRemoveItem(){ 
     console.log('remove Item'); 
     }  
     render(){ 
     const rowList = this.state.rowList.map((row, index) => { 
      return (<FormGroup key={index} index={index+1} field={`"itemCode_"${index}`} />); 
     }); 

     return(
      <div className="container"> 
      <input type="button" value="Add a row" className="button button-primary" onClick={this.handlerAddRow.bind(this)} /> <i class="fa fa-spinner" aria-hidden="true"></i> 
      {rowList} 
      </div> 
     ); 
     } 
    } 

    ReactDOM.render(<Main />, document.getElementById('app'));