我在一个页面视图中有多个数字类型输入。如果我在一个输入中输入一个数字,所有输入的值都会改变。我只有一个状态值,我将输入中的变量分配给它。如何只控制目标所在的输入?
家长:
class App extends Component {
state = {
starships: [],
value: 0,
quantity: 0,
};
handleInputChange = (e) => {
this.setState({
value: e.target.value,
});
};
render() {
const { starships, value, quantity } = this.state;
return (
<>
<Header quantity={quantity} />
<StarshipsList
starships={starships}
value={value}
quantity={quantity}
onChange={this.handleInputChange}
onClick={this.handleAddBtn}
/>
</>
);
}
}
孩子的孩子:
function Starship(props) {
return (
<tbody>
{props.starships.map(({ url, name, manufacturer, cost_in_credits }) => (
<tr key={url}>
<td>{name}</td>
<td>{manufacturer}</td>
<td>{cost_in_credits}</td>
<td>
<input
onChange={props.onChange}
value={props.value}
className="input"
type="number"
min="0"
/>
<button onClick={props.onClick} className="add-btn">
Add
</button>
</td>
</tr>
))}
</tbody>
);
}
答案 0 :(得分:0)
TrComponent
) 来呈现 tr
标记和子项。TrComponent
中,您创建一个状态调用 value
并处理更改以更新此状态onClick
中的 TrComponent
,您可以像这样更新:onClick={() => props.onClick(values_you_want)}
答案 1 :(得分:0)
首先将 value
状态更改为对象
state = {
starships: [],
value: {},
quantity: 0,
};
现在更改 handleInputChange
函数以接受 value
和 key
handleInputChange = (key, value) => {
this.setState({
value[key]: value,
});
};
现在在 Starship
组件中,我们将调用 onChange
方法,其中 url
为键,e.target.value
为值:
<input
onChange={(e) => props.onChange(url, e.target.value)}
value={props.value[url]}
className="input"
type="number"
min="0"
/>