具有JSON值的变量输入

Question

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

输入字段是由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>
)}

Answer 1

在下面的每个输入中添加onChange和value。

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

添加要调用的函数

handleChange(name, e){
    var change = {};
    change[name] = e.target.value;
    this.setState(change);
  }

Answer 2

具有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)}
            />
        });
    }   
}

现在，只要您想用当前输入值更新状态，就调用this.updateState()。

例如<input ... onBlur={this.updateState} />

Answer 3

输入字段的状态与状态完全分离。由于输入字段具有自己的状态，因此我们在其中输入的任何内容都将存储在输入字段中。

我们应该摆脱输入字段的状态，而只能依靠“状态”对象。我们希望有单一的事实来源，因此我们必须将输入转换为“受控元素”。受控元素没有自己的状态，它们通过props获取所有数据，并且通过引发事件来通知数据更改。可以说我们有两个字段，分别是：用户名和邮件：我们在输入字段中添加“值”属性以摆脱输入自身的状态

state={account:{username:"",mail:""}}
<input value={this.state.account.username} id="username" />
<input value={this.state.account.email} id="email" />

当前，我们将无法在输入字段中键入任何内容，因为它们的值设置为“”。我们必须处理更改：

handleChange=e=>{
const account={...this.state.account}
account[e.currentTarget.name]=e.currentTarget.value //currentTarget returns input field
this.setState({account:account})} //this.setState({account})}

如果要动态设置值，则应在输入字段中使用方括号符号和“ name”属性。

<input value={this.state.account.username} name="username" onChange={this.handleChange} id="username" />
<input value={this.state.account.email} name="email" onChange={this.handleChange}  id="email" />

Answer 4

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

//使用 React Hook

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})
  }
}

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

4 个答案:

具有JSON值的变量输入