无法在少数 ReactJs 表单输入字段中插入数据
2018-02-23
275
我正在创建一个
form
，它有 23 个
input
字段。在此表单中，我无法通过复制粘贴添加任何数据。一些字段是可编辑的，我可以输入任何数据，而一些字段不可编辑，我可以看到光标，但我无法输入任何数据。长期责任下方的字段是可编辑的，而上方的字段不可编辑
<form onSubmit={this.handleSubmitFirebase}>
<div className="form-group label-floating is-empty">
<label className="control-label">Accounting period</label>
<input type="date" className="form-control" ref={el => this.billto = el} onChange={this.handleChange} />
<input type="date" className="form-control" ref={el => this.billfrom = el} onChange={this.handleChange} />
<span className="material-input"></span>
</div>
<div className="form-group label-floating is-empty">
<label className="control-label">WORKING CAPITAL</label>
<input type="text" className="form-control" ref={el => this.state.capital = el} onChange={this.handleChange} />
<span className="material-input"></span>
</div>
<div className="form-group label-floating is-empty">
<label className="control-label">CURRENT ASSETS</label>
</div>
<div className="form-group label-floating is-empty">
<label className="control-label">Cash</label>
<input type="text" className="form-control" value={this.state.cash} onChange={this.handleChange} />
<span className="material-input"></span>
</div>
<div className="form-group label-floating is-empty">
<label className="control-label">Investments</label>
<input type="text" className="form-control" value={this.state.investments} onChange={this.handleChange} />
<span className="material-input"></span>
</div>
<div className="form-group label-floating is-empty">
<label className="control-label">Inventories</label>
<input type="text" className="form-control" value={this.state.inventories} onChange={this.handleChange} />
<span className="material-input"></span>
</div>
<div className="form-group label-floating is-empty">
<label className="control-label">Accounts receivable</label>
<input type="text" className="form-control" value={this.state.ac_receiv} onChange={this.handleChange} />
<span className="material-input"></span>
</div>
<div className="form-group label-floating is-empty">
<label className="control-label">Pre-paid expenses</label>
<input type="text" className="form-control" value={this.state.pre_paid_exp} onChange={this.handleChange} />
<span className="material-input"></span>
</div>
<div className="form-group label-floating is-empty">
<label className="control-label">Other</label>
<input type="text" className="form-control" value={this.state.other} onChange={this.handleChange} />
<span className="material-input"></span>
</div>
<div className="form-group label-floating is-empty">
<label className="control-label">Total current Assets</label>
<input type="text" className="form-control" value={this.state.curentAssetTotal} onClick={this.countTotal} onChange={this.handleChange} />
<span className="material-input"></span>
</div>
<div className="form-group label-floating is-empty">
<label className="control-label">FiXED ASSETS</label>
</div>
<div className="form-group label-floating is-empty">
<label className="control-label">Property and equipment</label>
<input type="text" className="form-control" value={this.state.prop_equipmnt} onChange={this.handleChange} />
<span className="material-input"></span>
</div>
<div className="form-group label-floating is-empty">
<label className="control-label">Leasehold improvements</label>
<input type="text" className="form-control" value={this.state.leasehold} onChange={this.handleChange} />
<span className="material-input"></span>
</div>
<div className="form-group label-floating is-empty">
<label className="control-label">Equity and other investments</label>
<input type="text" className="form-control" value={this.state.equity} onChange={this.handleChange} />
<span className="material-input"></span>
</div>
<div className="form-group label-floating is-empty">
<label className="control-label">Less accumulated depreciation(-Value)</label>
<input type="text" className="form-control" value={this.state.accum_depreciation} onChange={this.handleChange} />
<span className="material-input"></span>
</div>
<div className="form-group label-floating is-empty">
<label className="control-label">Total fixed Assets</label>
<input type="text" className="form-control" value={this.state.fixedAssetTotal} onClick={this.countTotal} onChange={this.handleChange} />
<span className="material-input"></span>
</div>
<div className="form-group label-floating is-empty">
<label className="control-label">Other Assets</label>
</div>
<div className="form-group label-floating is-empty">
<label className="control-label">Charity</label>
<input type="text" className="form-control" value={this.state.Charity} onChange={this.handleChange} />
<span className="material-input"></span>
</div>
<div className="form-group label-floating is-empty">
<label className="control-label">Total other Assets</label>
<input type="text" className="form-control" value={this.state.otherAssetTotal} onClick={this.countTotal} onChange={this.handleChange} />
<span className="material-input"></span>
</div>
<div className="form-group label-floating is-empty">
<label className="control-label">Grand Total Assets</label>
<input type="text" className="form-control" value={this.state.GrandotherAssetTotal} onClick={this.countTotal} onChange={this.handleChange} />
<span className="material-input"></span>
</div>
<div className="form-group label-floating is-empty">
<label className="control-label">Current Liabilities</label>
</div>
<div className="form-group label-floating is-empty">
<label className="control-label">Accounts payable</label>
<input type="text" className="form-control" value={this.state.acc_payable} onChange={this.handleChange} />
<span className="material-input"></span>
</div>
<div className="form-group label-floating is-empty">
<label className="control-label">Accrued wages</label>
<input type="text" className="form-control" value={this.state.accure_wages} onChange={this.handleChange} />
<span className="material-input"></span>
</div>
<div className="form-group label-floating is-empty">
<label className="control-label">Accrued compensation</label>
<input type="text" className="form-control" value={this.state.accure_compens} onChange={this.handleChange} />
<span className="material-input"></span>
</div>
<div className="form-group label-floating is-empty">
<label className="control-label">Accounts receivable</label>
<input type="text" className="form-control" value={this.state.acc_receivable} onChange={this.handleChange} />
<span className="material-input"></span>
</div>
<div className="form-group label-floating is-empty">
<label className="control-label">Income taxes payable</label>
<input type="text" className="form-control" value={this.state.it_tax_payble} onChange={this.handleChange} />
<span className="material-input"></span>
</div>
<div className="form-group label-floating is-empty">
<label className="control-label">Unearned revenue</label>
<input type="text" className="form-control" value={this.state.uneared_revenue} onChange={this.handleChange} />
<span className="material-input"></span>
</div>
<div className="form-group label-floating is-empty">
<label className="control-label">Other</label>
<input type="text" className="form-control" value={this.state.OtherLiability} onChange={this.handleChange} />
<span className="material-input"></span>
</div>
<div className="form-group label-floating is-empty">
<label className="control-label">Total current Liabilities</label>
<input type="text" className="form-control" value={this.state.currLiabilitiesTotal} onClick={this.countTotal} onChange={this.handleChange} />
<span className="material-input"></span>
</div>
<div className="form-group label-floating is-empty">
<label className="control-label">Long-term Liabilities</label>
</div>
<div className="form-group label-floating is-empty">
<label className="control-label">Mortgage payable</label>
<input type="text" className="form-control" value={this.state.mortg_payable} onClick={this.countTotal} onChange={this.handleChange} />
<span className="material-input"></span>
</div>
<div className="form-group label-floating is-empty">
<label className="control-label">Total Long-termLiabilities</label>
<input type="text" className="form-control" value={this.state.longtermLiabilitiesTotal} onClick={this.countTotal} onChange={this.handleChange} />
<span className="material-input"></span>
</div>
<div className="form-group label-floating is-empty">
<label className="control-label">Owner Equity</label>
<input type="text" className="form-control" value={this.state.owner_equity} onClick={this.countTotal} onChange={this.handleChange} />
<span className="material-input"></span>
</div>
<div className="form-group label-floating is-empty">
<label className="control-label">Investment capital</label>
<input type="text" className="form-control" value={this.state.investment_capital} onChange={this.handleChange} />
<span className="material-input"></span>
</div>
<div className="form-group label-floating is-empty">
<label className="control-label">Accumulated retained earnings</label>
<input type="text" className="form-control" value={this.state.accuml_earning} onChange={this.handleChange} />
<span className="material-input"></span>
</div>
<div className="form-group label-floating is-empty">
<label className="control-label">Total</label>
<input type="text" className="form-control" value={this.state.totalOwnerEquity} onClick={this.countTotal} onChange={this.handleChange} />
<span className="material-input"></span>
</div>
<div className="form-group label-floating is-empty">
<label className="control-label">Total Liabilities & Stockholder Equity</label>
<input type="text" className="form-control" value={this.state.totalLaibility_stackEquity} onClick={this.countTotal} onChange={this.handleChange} />
<span className="material-input"></span>
</div>
<div className="form-group label-floating is-empty">
<span className="material-input"></span>
</div>
<button type="submit" className="btn btn-fill btn-rose">Submit</button>
</form>
1个回答
如果没有其余代码，我无法确定，但听起来您正在使用
受控组件
，而没有使用
onChange
回调更新其值。
当您设置
value
属性时，它会“绑定”到您为其设置的变量。例如，
<input type="text" className="form-control" value={this.state.inventories} onChange={this.handleChange} />
，此输入的值将是
this.state.inventories
的值。如果您不更新后者，则无法更改输入值。要更新此值，您可以使用
onChange
回调，该回调设置为
this.handleChange
，但我不确定您是否编写了该方法。
在
this.handleChange
方法上，您将使用
setState
将
this.state.inventories
值更改为表单中写入的值，如下所示：
handleChange(event) {
this.setState({inventories: event.target.value});
}
编辑：
还有一件需要注意的事情：所有输入都使用相同的回调来更新它们的值，因此您不能只为每个输入添加
this.setState({state: event.target.value});
，因为
event.target.value
将在触发回调时设置为正在编辑的输入的值。您需要一个条件来检查正在编辑哪个输入。
其中一种方法是向输入添加
name
，并通过
onChange
回调中的
event.target.name
进行检查。正如我在评论中建议的那样，您应该阅读
ReactJS 表单文档
。
IanC
2018-02-23