react.js --如何在动态生成的按钮中添加成功元素？
react.js --如何在动态生成的按钮中添加成功元素？
提问于 2017-09-05 01:59:40
我使用textfields和按钮动态生成组件。每个按钮都执行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>
);
};谢谢
回答 1
Stack Overflow用户
回答已采纳
发布于 2017-09-06 07:36:39
如果将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'));页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：
https://stackoverflow.com/questions/46046003
复制相关文章
相似问题
腾讯云开发者
