如何通过 function 在反应 js 中形成输入值？

Question

我想将 function 'handleTaxInput' 传递给输入字段的 value 属性，以将输入字段的值设置为此 function 返回的值。 但是，在console.log(this.state.totalTaxInv)上，我变得不确定。 我没有得到实际的 state，我应该在运行 this.handleTaxAmount() 后得到。

handleTaxAmount(){
        if(this.state.cgstsgstRate === 0 || this.state.cgstsgstRate === ""){
            return Number(this.state.amount) + Number(this.state.amount) * Number(this.state.igstRate / 100)
        } else if(this.state.igstRate === 0 || this.state.igstRate === ""){
            return Number(this.state.amount) + Number(this.state.amount) * Number(this.state.cgstsgstRate * 2 / 100)
        } else {
            return 0
        }
    }

                        <div>
                            <label>Total Inv. Amount</label>
                            <input name="totalInvAmt" placeholder={this.handleTaxAmount()} value={this.handleTaxAmount()}/>
                        </div>

我已经使用构造函数初始化了所有状态。

Answer 1

我无法发表评论，所以我不得不这样问。 您是使用this.setState(...)初始化 state 还是像this.state = {...}一样分配了 state？

It seems like you want the state to change after calling your function, but you don't set the state anywhere in your function with this.setState(...) .

另外：为什么要使用这么多Number构造函数？

编辑（答案）：

handleTaxAmount(){
        let result = 0;

        if(this.state.cgstsgstRate === 0 || this.state.cgstsgstRate === ""){
            result = Number(this.state.amount) + Number(this.state.amount) * Number(this.state.igstRate / 100);
        } else if(this.state.igstRate === 0 || this.state.igstRate === ""){
            result = Number(this.state.amount) + Number(this.state.amount) * Number(this.state.cgstsgstRate * 2 / 100);
        }

        this.setState({ variableYouWantToChange: result });
    }

如果您希望输入字段的值随 state 更改，请使用：

<div>
    <label>Total Inv. Amount</label>
    <input name="totalInvAmt" placeholder={this.state.variableChangedByFunction} value={this.state.variableChangedByFunction}/>
</div>

如果要绑定输入的每个更改以运行 function，请执行以下操作：

<div>
    <label>Total Inv. Amount</label>
    <input name="totalInvAmt" placeholder={this.state.variableChangedByFunction} value={this.state.variableChangedByFunction} change={this.handleTaxAmount}/>
</div>

并在您的构造函数中运行this.handleTaxAmount = this.handleTaxAmount.bind(this) 。

如果您想了解有关如何使用组件 state 的更多信息，请参阅文档