Reactjs 将js动态输入字段值反应为状态

如何将动态输入字段值作为数组传递给state，并在用户再次更改输入时更新该值

输入字段是由JSON数据生成的，在状态下，我们无法为所有字段定义初始值。有人能就这类问题提出一些建议吗

this.state = { 
file:[{value1,value2}]
}; 

输入字段的生成方式如下

{this.state.language.map((item,index) =>
<div className="be-checkbox inline" key={index} >
 <input type="text"  onChange={this.handleChange.bind(this, index)} value={this.state.index} />
</div>
)}

{this.state.language.map（（项，索引）=>
)}

在每个输入中添加onChange和value，如下所示

<input type="text" onChange={this.handleChange.bind(this, index)} value={this.state.index}/>

带有JSON值的变量输入 您可以构建一个模型来存储新值，并创建两个方法，一个用于处理新值，另一个用于更新状态。然后可以从数组中的JSON数据调用键上的

map（）

，并为每个条目生成输入

class MyFormComponent extends React.Component {
    inputValues = new Map();

    onInputChange(evt, key){
        inputValues.set(key, evt.target.value);
    }

    updateState() {
        const update = inputValues.reduce((updater, value) => {
           return {...updater, value} // assuming value === {key: value} from your example, because {value, value} is not valid JSON
        }, {});

        this.setState({
            file: [JSON.stringify(update)]
        });
    }

    render(
       const keys = Object.keys(JSON.parse(this.state.file[0]))

       return keys.map(key => {
             // onChange will give you new values to your map model. 
            <input 
                type="text"
                key={key}
                onChange={eve => this.onInputChange(evt, key)}
            />
        });
    }   
}

MyFormComponent类扩展了React.Component{ inputValues=新映射（）； onInputChange（evt，钥匙）{ 设置（key，evt.target.value）； } 房地产（）{ const update=inputValues.reduce（（更新程序，值）=>{ 从示例中返回{…updater，value}//假设value==={key:value}，因为{value，value}不是有效的JSON }, {}); 这是我的国家({ 文件：[JSON.stringify（更新）] }); } 渲染( const keys=Object.keys（JSON.parse（this.state.file[0]）） 返回key.map（key=>{ //onChange将为地图模型提供新值。 this.onInputChange（evt，key）} /> }); } } 现在，只要您想用当前输入值更新状态，就调用this.updateState（）

例如

//使用反应钩

const [data, setData] = useState({});
//the create an onInputChange function for the Inputs this way
const onInputChange = async e =>{
  const {name, value} = e.target;
  //check to validate if entry is not a number
  if(isNaN(name)){
    data[name] = value;
    
    //somehow update data
    setData({...data})
  }
}

---

你能用你正在使用的相关代码更新你的问题吗？这样你就很容易更新状态或完整状态中的数组了？你好，我需要数组中的值，如下所示。state={file:[{value1，value2}]}；而输入字段的生成方式是{this.state.language.map（（item，index）=>）}提前感谢可能的副本

//So, here's a simple trick i use to get this done:

const [data, setData] = useState({});
//the create an onInputChange function for the Inputs this way
const onInputChange = async e =>{
  const {name, value} = e.target;
  //check to validate if entry is not a number
  if(isNaN(name)){
    data[name] = value;
    
    //somehow update data
    setData({...data})
  }
}