我已经构建了一个像这样的React表:
const Table = ({data}) => {
return (
<table className="table table-bordered">
<thead>
<tr>
<th>Qty</th>
<th>Description</th>
<th>Price (£)</th>
</tr>
</thead>
<tbody>
{data.map((row) => {
return (
<tr>
<td><input type='number' className='form-control' step='1' min="1" value={row[0]}/></td>
<td><input type='text' className='form-control' value={row[1]}/></td>
<td><input type='text' className='form-control' placeholder='6.00' value={row[2]}/></td>
</tr>
);
})}
</tbody>
</table>
);
};
Table.propTypes = {
data: React.PropTypes.array.isRequired
};
export default Table;
在我正在使用此组件的类中,我将数据作为参数传递(最初为空):
materials: [[],[],[],[],[],[],[],[],[],[]] //Initialise with 10 empty rows
<Table data={materials} />
这将构建一个包含10个空行的表。现在唯一的问题是,当我将数据输入到表中时,我映射的数据数组不会使用我输入的数据进行更新。
我认为我需要的是一些事件,我可以用已经输入的快照更新数据,但我不知道如何实现这一点。任何帮助将不胜感激。
答案 0 :(得分:3)
您可以通过维护表数据的状态来实现此目的。我已经在这里做了一个粗略的结构:http://codepen.io/PiotrBerebecki/pen/QKrqPO
查看显示状态更新的控制台输出。
class Table extends React.Component {
constructor(props) {
super(props);
this.state = {
materials: props.data
};
}
handleChange(index, dataType, value) {
const newState = this.state.materials.map((item, i) => {
if (i == index) {
return {...item, [dataType]: value};
}
return item;
});
this.setState({
materials: newState
});
}
render() {
console.clear();
console.log(JSON.stringify(this.state.materials));
return (
<table className="table table-bordered">
<thead>
<tr>
<th>Qty</th>
<th>Description</th>
<th>Price (£)</th>
</tr>
</thead>
<tbody>
{this.state.materials.map((row, index) => {
return (
<tr>
<td>
<input onChange={(e) => this.handleChange(index, 'qty', e.target.value)}
type='number'
className='form-control'
step='1' min="1"
value={this.state.materials[index].qty}/>
</td>
<td>
<input onChange={(e) => this.handleChange(index, 'desc', e.target.value)}
type='text'
className='form-control'
value={this.state.materials[index].desc}/>
</td>
<td>
<input onChange={(e) => this.handleChange(index, 'price', e.target.value)}
type='text'
className='form-control'
placeholder='6.00'
value={this.state.materials[index].price}/>
</td>
</tr>
);
})}
</tbody>
</table>
);
}
}
const materials = [
{ qty: '', desc: '', price: '' },
{ qty: '', desc: '', price: '' },
{ qty: '', desc: '', price: '' },
{ qty: '', desc: '', price: '' },
{ qty: '', desc: '', price: '' },
{ qty: '', desc: '', price: '' },
{ qty: '', desc: '', price: '' },
{ qty: '', desc: '', price: '' }
]
ReactDOM.render(<Table data={materials} />, document.getElementById('app'));
答案 1 :(得分:3)
React并不像双向数据绑定那样工作,例如Angular JS。 props
是只读的,因此您需要更新它们所属的位置。
例如,声明<Table />
的parente组件在其状态中可以有materials
数组,除了将materials
作为props传递之外,它还可以传递像{{onCellChange(row, column)
这样的函数处理程序。 1}},因此您可以将其与输入元素中的onChange
事件绑定。
像这样,
const Table = ({data, onCellChange}) => {
return (
<table className="table table-bordered">
<thead>
<tr>
<th>Qty</th>
<th>Description</th>
<th>Price (£)</th>
</tr>
</thead>
<tbody>
{data.map((row, index) => {
return (
<tr key={index}>
<td><input type='number' className='form-control' step='1' min="1" value={row[0]} onChange={() => onCellChange(index, 0)}/></td>
<td><input type='text' className='form-control' value={row[1]} onChange={() => onCellChange(index, 1)}/></td>
<td><input type='text' className='form-control' placeholder='6.00' value={row[2]} onChange={() => onCellChange(index, 2)}/></td>
</tr>
);
})}
</tbody>
</table>
);
};
Table.propTypes = {
data: React.PropTypes.array.isRequired
};
因此,在父组件中,您将声明组件为<Table data={this.state.materials} onCellChange={this.onCellChange} />
。
它会有这样的方法:
onCellChange: function(row, column) {
//update the cell with this.setState() method
}
答案 2 :(得分:0)
你需要更新状态onChange:
getInitialState: function() {
return {value: 'Hello!'};
},
handleChange: function(event) {
this.setState({value: event.target.value});
},
render: function() {
return (
<input
type="text"
value={this.state.value}
onChange={this.handleChange}
/>
);
}