您可以从下面的代码块中看到,在 Description.js 中,我必须向下传递名为handleChange
是一个函数,必须使用两个参数handleChange(newValue,index)
来调用。
handleChange
函数将更新状态,在这种情况下,该状态为长度为3(每个输入一个值)的数组。
由于index
是由 Description.js 组件创建的,因此我不得不将其作为道具传递下来。
它按预期工作。
问题
这是不好的做法吗? index
是(React,Javascript或HTML的)保留字吗?
有更好的方法吗?
App.js
import React, { useState, useCallback } from "react";
import ReactDOM from "react-dom";
import Description from "./Description";
function App() {
console.log("Rendering App...");
const [inputValues, setInputValues] = useState(["", "", ""]);
const handleChange = useCallback((newValue, index) => {
setInputValues(prevState => {
const aux = Array.from(prevState);
aux[index] = newValue;
return aux;
});
}, []);
return <Description values={inputValues} handleChange={handleChange} />;
}
Description.js
import React from "react";
import TextInput from "./TextInput";
function Description(props) {
console.log("Rendering Description...");
const inputItems = props.values.map((item, index) => (
<div key={index}>
<div>Input {index + 1}</div>
<TextInput value={item} handleChange={props.handleChange} index={index} />
</div>
));
return <React.Fragment>{inputItems}</React.Fragment>;
}
TextInput.js
import React from "react";
const TextInput = React.memo(function TextInput(props) {
console.log("Rendering TextInput..." + props.index);
return (
<input
type="text"
value={props.value}
onChange={event => props.handleChange(event.target.value, props.index)}
/>
);
});
答案 0 :(得分:2)
您的操作没有任何问题,但是您可以根据需要调用prop和function参数。它不必命名为index。他们甚至不必相同。
您可以执行此操作,并且将完全相同:
const handleChange = useCallback((newValue, bananas) => {
setInputValues(prevState => {
const aux = Array.from(prevState);
aux[bananas] = newValue;
return aux;
});
}, []);
与此相同:
const TextInput = React.memo(function TextInput(props) {
console.log("Rendering TextInput..." + props.wookie);
return (
<input
type="text"
value={props.value}
onChange={event => props.handleChange(event.target.value, props.wookie)}
/>
);
});
// and then...
<TextInput value={item} handleChange={props.handleChange} wookie={index} />
答案 1 :(得分:2)
否,索引不是保留的道具名称。实际上,我所知道的唯一保留名称是ref
和key