在 onChange 事件中获取按钮值

Question

我正在尝试在 onChange 中获取按钮值 event.Later 我必须将该值绑定到 state。但是我得到一个空值。

<button onChange={this.handleCategoryName}  onClick={this.goToNextPage}>
    Restaurant
</button>

这是我试图获取值的事件 "Restaurant"

handleCategoryName(event) {  this.setState({ categoryName:event.target.innerHTML });   }

state 我将在其中绑定按钮值。

this.state = {
    apiUrl: config.publicRuntimeConfig.publicRuntimeConfigValue.apiUrl,
    value: 850,
    categoryName: " ",
};
this.handleCategoryName = this.handleCategoryName.bind(this);

但是我在数据库中得到一个空值。

axios.post( this.state.apiUrl+'/api/v1/LeadSurvey/save', {
            'categoryName':this.state.categoryName,
           }

我该如何解决？

Answer 1

您似乎想要使用 <input> 字段来获取 categoryName，因为看起来您想要获取输入并且还有一个带有 onClick 事件的按钮.我建议查看 W3Schools' page on the <input> tag。您将能够使用带有 onChange 属性的 <input> 标签。

Answer 2

问题是按钮不能有 onChange 属性。为什么？因为按钮没有可以更改的字段。 HTML 中所有可以与 onChange 属性一起使用的元素都有一个字段。当它们发生变化时，它会触发某些事情。按钮只有解释它的纯文本，或者如果您不需要按钮上的文本并且如果不执行一些花哨的功能就无法更改文本，则根本没有任何内容。即使按钮可以点击，您也不能直接对它们使用 onChange 属性。 onChange 属性是带有按钮的 onClick 属性。所以我建议 onChange 事件属性应该被删除并用其他东西代替。

在 onChange 事件中获取按钮值

getting button value in onChange event

javascript

state

bind

reactjs