如何清除动态输入字段

Question

我有一个带有两个单选按钮的表单。 根据您的选择，您的下一个字段将发生变化。 有一些计算发生了，我已经弄清楚了。 但是，我的一个问题是，如果您在单选按钮之间切换，我将无法清除文本字段。

对于单选按钮，有一个设置状态

<label style={{ paddingRight: 50 }}>
              <input
                type="radio"
                name="react-tips"
                value="option1"
                checked={this.state.selectedOption === "option1"}
                onChange={this.handleOptionChange}
                className="form-check-input"
              />
              Transactions
            </label>
            <label style={{}}>
              <input
                type="radio"
                name="react-tips"
                value="option2"
                checked={this.state.selectedOption === "option2"}
                onChange={this.handleOptionChange}
                className="form-check-input"
              />
              Partners
            </label>

如您所见， checked={this.state.selectedOption === "option1"}是让我们知道选择了哪个单选按钮的原因。

由此有文本输入的条件渲染：

let monthlyField;
if (this.state.selectedOption === "option1") {
  monthlyField = <div>
    <p> $250 per 250 monthly transactions, unlimited trading partners<br />Enter number of transactions per month: </p>
    <input  type="number" placeholder="250" onChange={this.onChangeMonthlyTransactions.bind(this)}/>
  </div>
} else {
  monthlyField = <div>
    <p> $250 per trading partner unlimited transactions <br />Enter number of trading partners: </p>
    <input type="number" placeholder="1" onChange={this.onChangeMonthlyPartners.bind(this)}/>
  </div>
}

在渲染中的哪个位置

 {monthlyField}

现在将这个设置状态用于单选按钮，我可以使用它来确定选择了哪个选项以便正确计算

  //Calculating total cost


calculateTotal() {
if (this.state.selectedOption === "option1") {

  console.log("This is transaction based")
  var monthly = (Math.ceil(this.state.typedMonthly /250)) * 250
  var total =  monthly + this.state.fixedAmmount + (this.state.typedMapping * 750)
} else {
  console.log("This is partner based")
  var monthly = (Math.ceil(this.state.typedMonthlyTransaction)) * 250
  var total =  monthly + this.state.fixedAmmount + (this.state.typedMapping * 750)
}

return (
  <p>$ {total}</p> 
)

}

然而，一切正常，在我的文本字段中，如果我输入一个数字，然后切换到另一个单选按钮，相同的文本仍然在文本字段中。 我需要清除它。

这个 gif 就是一个例子。 https://recordit.co/F1WXBgeWB4

当我在单选按钮之间切换时，文本框不会清除。 底部的计算完全按预期工作（即更改时重置）

编辑：更改单选按钮代码

  handleOptionChange = changeEvent => {
this.setState({
  selectedOption: changeEvent.target.value
});


};

Answer 1

我相信状态中的变量和您的输入之间缺少双重绑定。 这可以解决

if (this.state.selectedOption === "option1") {
  monthlyField = <div>
    <p> $250 per 250 monthly transactions, unlimited trading partners<br />Enter number of transactions per month: </p>
    <input  type="number" value={this.state.inputValue} placeholder="250" onChange={this.onChangeMonthlyTransactions.bind(this)}/>
  </div>
} else {
  monthlyField = <div>
    <p> $250 per trading partner unlimited transactions <br />Enter number of trading partners: </p>
    <input type="number" value={this.state.inputValue} placeholder="1" onChange={this.onChangeMonthlyPartners.bind(this)}/>
  </div>
}

请注意添加的value字段。 还要记住在构造函数中创建变量。 这一点：

handleOptionChange = changeEvent => {
    this.setState({
      selectedOption: changeEvent.target.value,
      inputValue: ''
    });
};

有关更多信息，请查看表单文档