无法通过的setState（）在ReactJS

字体 - 真棒图标添加到按钮在我的课，我设置一个按钮，文本作为状态：无法通过的setState（）在ReactJS

constructor(props) { 
    super(props); 
    this.state = { 
    buttonText: 'LOGIN', 
    }; 
}

按钮标记如下：

<button type="submit" className="btn btn-lg btn-primary w-100 my-2">{this.state.buttonText}</button>

我想通过通过功能改变在buttonText值动态更改文本到FA图标：

onSubmit(e) { 
e.preventDefault(); 
this.setState({ 
    buttonText: '<i className="fa fa-spinner" aria-hidden="true" />', 
}); 
axios.post('/api/authentication/login', { username: this.state.username, password: this.state.password }) 
    .then((response) => { 
     this.props.onLogin(response.data); 
     this.props.toggle(); 
    }); 
}

钍是作品，因为在按钮重新与新文本呈现;但是，它不是FA图标，而是使用标记呈现，即<i className="fa fa-spinner" aria-hidden="true" />显示为按钮标题中的原始文本。我究竟做错了什么？

来源

2017-08-14 TheLearner

删除单引号，您还可以检查'反应 - 异步button'组件（https://github.com/selvagsz/react-async-button）保持干燥 – selvagsz

您当前的解决方案通过输入html动态地改变DOM。这可以通过dangerouslySetInnerHTML来实现，但我不会推荐它，当一个完美可行的解决方案可用时：

我建议您创建一个元素并切换是否通过布尔属性呈现您的状态。例如{loading:false}

<i className="..." style={this.state.loading ? {display:'inline'} : {display:'none'}} />

然后让你的onsubmit方法正确地在你的状态切换loading

来源

2017-08-14 10:34:16 hairmot

刚刚从'<i className="fa fa-spinner" aria-hidden="true" />'

onSubmit(e) { 
e.preventDefault(); 
this.setState({ 
    buttonText: <i className="fa fa-spinner" aria-hidden="true" />, 
}); 
axios.post('/api/authentication/login', { username: this.state.username, password: this.state.password }) 
    .then((response) => { 
     this.props.onLogin(response.data); 
     this.props.toggle(); 
    }); 
}

来源

2017-08-14 10:37:14

无法通过的setState（）在ReactJS

回答

相关问题