reactjs - 向文本框属性中的状态添加动态值

Question

我在这样的文本框中迭代一个状态属性：

{this.state.selectedQuestion.map(e=>{
    return (<ul>
    <li key={e.id}> {e.id}</li>
    <li key={e.id}> {e.question}</li>
    <li key={e.id}> <ul> {e.options.map((t,a)=>{
       return(<li key={e.id}><input type="text" name={"editValue"+a} onChange={this.checkRadioChange} /> </li>)
    })}</ul> </li>
    <li><button onClick={()=>this.editQuestion(e)}>Edit</button></li>
    </ul>
    )
    })}

现在我的状态是这样的：

this.state ={
    selectedQuestion:[],
    editValue0:'',
    editValue1:'',
    editValue2:'',
    editValue3:''
}

onchange 事件onChange={this.checkRadioChange}是这样的：

checkRadioChange=(event)=>{

 this.setState({[event.target.name]: event.target.value},()=>{
   // console.log('this.state.selectedQuestion[0].options: ',this.state.selectedQuestion[0].options)

    console.log("THIS.STATE",this.state)
})

问题是我无法将输入中的动态值等同于相应的状态属性，例如：

return(<li key={e.id}><input type="text" name={"editValue"+a} onChange={this.checkRadioChange} /> </li>)

应该改为

return(<li key={e.id}><input type="text" name={"editValue"+a} value="this.state.editvalue0" onChange={this.checkRadioChange} /> </li>) 
return(<li key={e.id}><input type="text" name={"editValue"+a} value="this.state.editvalue1" onChange={this.checkRadioChange} /> </li>)
return(<li key={e.id}><input type="text" name={"editValue"+a} value="this.state.editvalue2" onChange={this.checkRadioChange} /> </li>)
return(<li key={e.id}><input type="text" name={"editValue"+a} value="this.state.editvalue3" onChange={this.checkRadioChange} /> </li>)

因为li正在迭代。所以我尝试了类似的东西：

return(<li key={e.id}><input type="text" name={"editValue"+a} value={this.state.editvalue + {a}} onChange={this.checkRadioChange} /> </li>)

和

return(<li key={e.id}><input type="text" name={"editValue"+a} value={this.state.editvalue + a}" onChange={this.checkRadioChange} /> </li>)

向文本框属性中的状态添加动态值

我在这样的文本框中迭代一个状态属性：

{this.state.selectedQuestion.map(e=>{
    return (<ul>
    <li key={e.id}> {e.id}</li>
    <li key={e.id}> {e.question}</li>
    <li key={e.id}> <ul> {e.options.map((t,a)=>{
       return(<li key={e.id}><input type="text" name={"editValue"+a} onChange={this.checkRadioChange} /> </li>)
    })}</ul> </li>
    <li><button onClick={()=>this.editQuestion(e)}>Edit</button></li>
    </ul>
    )
    })}

现在我的状态是这样的：

this.state ={
    selectedQuestion:[],
    editValue0:'',
    editValue1:'',
    editValue2:'',
    editValue3:''
}

onchange 事件onChange={this.checkRadioChange}是这样的：

checkRadioChange=(event)=>{

 this.setState({[event.target.name]: event.target.value},()=>{
   // console.log('this.state.selectedQuestion[0].options: ',this.state.selectedQuestion[0].options)

    console.log("THIS.STATE",this.state)
})

问题是我无法将输入中的动态值等同于相应的状态属性，例如：

return(<li key={e.id}><input type="text" name={"editValue"+a} onChange={this.checkRadioChange} /> </li>)

应该改为

return(<li key={e.id}><input type="text" name={"editValue"+a} value="this.state.editvalue0" onChange={this.checkRadioChange} /> </li>) 
return(<li key={e.id}><input type="text" name={"editValue"+a} value="this.state.editvalue1" onChange={this.checkRadioChange} /> </li>)
return(<li key={e.id}><input type="text" name={"editValue"+a} value="this.state.editvalue2" onChange={this.checkRadioChange} /> </li>)
return(<li key={e.id}><input type="text" name={"editValue"+a} value="this.state.editvalue3" onChange={this.checkRadioChange} /> </li>)

因为li正在迭代。所以我尝试了类似的东西：

return(<li key={e.id}><input type="text" name={"editValue"+a} value={this.state.editvalue + {a}} onChange={this.checkRadioChange} /> </li>)

和

return(<li key={e.id}><input type="text" name={"editValue"+a} value={this.state.editvalue + a}" onChange={this.checkRadioChange} /> </li>)

和

return(<li key={e.id}><input type="text" name={"editValue"+a} value={'this.state.editvalue' + a}" onChange={this.checkRadioChange} /> </li>)

但它要么抛出错误，要么显示undefined[object][object]结果。

注意：这selectedQuestion是动态的，所以请不要selectedQuestion:[]混淆this.state

但它要么抛出错误，要么显示undefined[object][object]结果。

注意：1）动态来了，selectedQuestion所以请不要混淆selectedQuestion:[]。this.state

  2) For testing, i tried  return(<li key={e.id}><input type="text" name={"editValue"+a} value={this.state.editvalue0} onChange={this.checkRadioChange} /> </li>)

并且它成功更新了editvalue0in this.state，所以如果我能够在 value 属性中设置动态状态，它就可以解决问题。

  3) To test, I tried giving a static value to `value` attribute like so:
value={this.state.editValue1}

我添加了一个静态值，this.state.editValue1如下所示：

this.state ={ selectedQuestion:[], editValue0:'', editValue1:'one', editValue2:'', editValue3:'' }

并将 的值应用于one所有迭代的输入，我还能够在editValue1in 中获取更新的值this.state。

但是当我这样做时：value={t.opt}

然后我能够获得以前在 json 中添加的每个值，但是当我输入时，这些词没有添加到文本框中（如预期的那样）。ny json 是这样的：

[
    {"id":1,
     "question":"Which continent india belongs to?",
     "options":[
        {"opt":"Australia"},
    {"opt":"Europe"},
    {"opt":"Asia"},
    {"opt":"Africa"}

      ]

    },

    {"id":2,
     "question":"New Delhi is capital of which country?",
     "options":[
        {"opt":"Croatia"},
    {"opt":"India"},
    {"opt":"America"},
    {"opt":"Iraq"}
      ]

    },

    {"id":3,
     "question":"Who was the first man to step on Moon?",
     "options":[
        {"opt":"Abdul Kalam"},
    {"opt":"Albert Einstein"},
    {"opt":"Sheldon Cooper"},
    {"opt":"Salman Khan"}
      ]

    }
    ]




  4) You are welcome to point out any better way, but please do answer on the dynamic value also. Thanks

标签： reactjs

Answer 1

我创建了一个 codepen 示例来演示您的问题案例，我不确定您的问题的根本原因是什么，但我能够相应地同步反应状态和 UI 输入之间的值。

class ListElement extends React.Component {

  constructor() {
    super()
    this.state = {
      selectedQuestions: [1,2,3,4],
      editValue0: 'value0',
      editValue1: 'value1',
      editValue2: 'value2',
      editValue3: 'value3'
    }
  }

  onChange = (event) => {
    this.setState({
      [event.target.name]: event.target.value
    })
  }

  render () {
    return (
      <ul>
        {
          this.state.selectedQuestions.map((item, index) => (
            <li key={index}>
              <label>{`editValue${index}`}</label>
              <input type="text"
                value={this.state[`editValue${index}`]}
                name={`editValue${index}`}
                onChange={this.onChange}/>
            </li>
          ))
        }
      </ul>
    )
  }
}

这是 codepen.io 的链接：https ://codepen.io/anon/pen/bXgWoM

希望能帮助到你 ：）