我在 Reactjs 中有一个类，如下所示:
class ViewLegos extends Component {
componentDidMount() {
this.props.store.getAllLegoParts();
}
render() {
const columns = [
{
Header: "Piece",
accessor: "piece"
},
{
Header: "Type",
accessor: "type"
}
];
return (
<div>
{this.props.store.legoParts.state === "pending" ? (
<h3>No data to display!</h3>
) : (
<ReactTable
defaultPageSize={10}
className="-striped -highlight"
data={this.props.store.legoParts.value}
columns={columns}
SubComponent={row => {
console.log(row);
return (
<Table striped bordered condensed hover>
<thead>
<tr>
<th>Name</th>
<th>Type</th>
<th>Start Date</th>
<th>End Date</th>
<th>Change it up!</th>
</tr>
</thead>
<tbody>
<tr onClick={this.props.store.changeData(row.original)}>
<td>
<input
type="text"
onChange={e => this.props.store.addLego("piece", e)}
name="piece"
value={row.original.piece}
/>
</td>
<td>
<input
type="text"
onChange={e =>
this.props.store.addLego("type", e.target.value)
}
placeholder={this.props.store.type}
/>
</td>
<td>
<Datetime
date="date"
onChange={e =>
this.props.store.addLego("startDate", e)
}
/>
</td>
<td>
<Datetime
type="date"
onChange={e => this.props.store.addLego("endDate", e)}
/>
</td>
<td>
<button
onClick={() =>
this.props.store.updatePiece(row.original)
}
>
Update
</button>
<button
onClick={() =>
this.props.store.deletePiece(
this.props.row.original.id
)
}
>
Delete
</button>
</td>
</tr>
</tbody>
</Table>
);
}}
/>
)}
</div>
);
}
}
单击一行时调用的changeData 函数位于MobX 存储中，如下所示:
changeData = action("change state", part => {
this.piece = part.piece;
});
当输入字段中的值发生更改时，Mobx 存储中会启用此功能:
addLego = action("addLego", (storeName, value) => {
this[storeName] = value.target.value;
});
我希望能够更新输入字段中的值。不过目前我只能改一个字母!每次我输入更多字母时，一个字母就会变成新字母。感谢您的帮助!
最佳答案
您在渲染时立即调用 changeData 函数。改为给 onClick 一个函数:
<tr onClick={() => this.props.store.changeData(row.original)}>
关于javascript - Reactjs 只能更改输入中的一个字母？，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/48136892/