react.js-如何在动态生成的按钮成功添加元素？

Question

I have dynamically generated component with textfields and buttons. Each button do the ajax request. It's all working fine. However, I want to display the success message or error message on button itself, adding some icon on it. This is where I got stuck. I setup the flag and change the state, but it will change on all the buttons as expected. I also tried to change the current target, but the reference didn't work in success callback. Can someone please help me with this.

    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>
  );
};

Thanks

Answer 1

If you move your checkAvailability and result of api request to FormControl component you can set error and success for single component.

For Example:

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'));