Javascript 如何清除动态输入字段

我有一张有两个单选按钮的表格。根据您的选择，您的下一个字段将更改。我已经计算出了一些计算结果。但是，我的一个问题是，如果在单选按钮之间切换，我无法清除文本字段

单选按钮有一个设置状态

<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>

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

  //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> 
)

---

我相信在状态变量和您的输入之间缺少双重绑定。这可以通过以下方法解决：

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>
}

---

有关这方面的更多信息，请查看单选按钮的

onChange

方法，是否可以添加代码？您需要向该函数添加一条语句，检查这些文本字段是否有内容，如果有，则清除它们。是否确实需要检查这些文本字段是否已经有内容？换零钱的时候把它们放空还不够吗？@Lykos94应该够了，是的@我已经加上了。这是唯一的状态改变。@Lykos94是的，只是把它们放在空的状态下，这正是我想要做的。但是我不知道怎么做。如何访问输入字段以使其为空？

  //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> 
)

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


};

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>
}

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