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

我已经动态生成了带有文本字段和按钮的组件。每个按钮都执行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>
  );
};

const FormGroup=（{index，type，field，value，onChange，spinner，isload，error，buttonType，brandList，handleBrandConfiguration，checkAvailability，handleCaseType，options，handleRemoveItem}）=>{
返回(
{index}
请选择品牌
{brandList}
请选择案例模板
{options}
{isLoading？错误？'Not Found'：：错误？'Not Found'：'Check Availability'}
);
};

---

谢谢

如果您将

检查可用性

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

类FormGroup扩展React.Component{
建造师（道具）{
超级（道具）；
此.state={
availabilityResult:null
};
}
callApi（用户名）{
返回（axios.get）https://api.github.com/users/“+用户名”）；
}
onChange（e）{
这是我的国家({
项目代码：e.target.value
});
}
检查可用性（e）{
const username=this.state.itemCode；
让currentValue=e.currentTarget.value；
//这里是ajax调用
这个.callApi（用户名）。然后（响应=>{
const login=response.data.login；
这是我的国家({
availabilityResult:（登录=='mesmerize86'）
});
}).catch（错误=>{
控制台日志（err）；
});
}
render（）{
const{index，field，value，handleremovietem}=this.props；
让inputState=''；
if（this.state.availabilityResult==true）inputState='button success'；
否则如果（this.state.availabilityResult==false）inputState='button danger'；
返回(
{index}
)    
}
}
类Main扩展了React.Component{
建造师（道具）{
超级（道具）；
此.state={
行列表：[]，
项目代码：[]，
项目代码：“”
}
}
handleradrow（）{
const rowList=this.state.rowList.concat（FormGroup）；
this.setState（{rowList}）；
}      
handleremovietem（）{
console.log（'remove Item'）；
}      
render（）{
const rowList=this.state.rowList.map（（行，索引）=>{
返回（）；
});
返回(
{rowList}
);
}
}
ReactDOM.render（，document.getElementById（'app'））；

如果将

检查可用性

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

类FormGroup扩展React.Component{
建造师（道具）{
超级（道具）；
此.state={
availabilityResult:null
};
}
callApi（用户名）{
返回（axios.get）https://api.github.com/users/“+用户名”）；
}
onChange（e）{
这是我的国家({
项目代码：e.target.value
});
}
检查可用性（e）{
const username=this.state.itemCode；
让currentValue=e.currentTarget.value；
//这里是ajax调用
这个.callApi（用户名）。然后（响应=>{
const login=response.data.login；
这是我的国家({
availabilityResult:（登录=='mesmerize86'）
});
}).catch（错误=>{
控制台日志（err）；
});
}
render（）{
const{index，field，value，handleremovietem}=this.props；
让inputState=''；
if（this.state.availabilityResult==true）inputState='button success'；
否则如果（this.state.availabilityResult==false）inputState='button danger'；
返回(
{index}
)    
}
}
类Main扩展了React.Component{
建造师（道具）{
超级（道具）；
此.state={
行列表：[]，
项目代码：[]，
项目代码：“”
}
}
handleradrow（）{
const rowList=this.state.rowList.concat（FormGroup）；
this.setState（{rowList}）；
}      
handleremovietem（）{
console.log（'remove Item'）；
}      
render（）{
const rowList=this.state.rowList.map（（行，索引）=>{
返回（）；
});
返回(
{rowList}
);
}
}
ReactDOM.render（，document.getElementById（'app'））；

请发布一个最小的、完整的、可验证的示例，不知道你在说什么。。

错误

是否不会返回？你是如何检查成功/错误的，以及它们返回的结果是什么？这是我为每个条件设置标志的最初尝试。例如，如果我获得成功，我设置了一个标志，如果有错误，我得到了另一个错误标志。这不是一个好方法，但我只是用它来测试。我应该把它取下来的。很抱歉把它弄糊涂了。我试图做的是，当我成功时，我想在我的按钮中添加一个图标，但如果我出现错误，我想在同一按钮上添加另一个错误图标。问题是，他们动态生成了组件，我不知道如何更改当前按钮。谢谢你看。你能为你如何使用FormGroup constantHi@bennygenel添加一些片段吗？我在这里写了一个小片段。[链接[（）]用于测试I ha