Question

我有一个像这样的渲染输入标记：

<input id="time" type="time">

我需要动态添加value属性

如何在React中执行此操作？提前致谢

Answer 1

是的，你可以做到。例如props是一个对象，其中包含您要根据某些条件添加的道具或属性，然后您就可以使用

 const props = { id: 'time', type: 'time' };
 if (condition1) {
    props.value = 'some value';
 }
 if(condition2) {
    props.abc = 'some other value';
 }   
 <input {...props} >

Answer 2

您应该在输入上添加onchange属性，以更改组件的状态。这看起来像这样：

<input type="text" value={this.state.value} onChange={this.handleChange} />

handleChange方法应该如下所示：

handleChange = (event) => {
    this.setState({value: event.target.value});
  }

有关详细信息，请查看以下文章：https://reactjs.org/docs/forms.html

Answer 3

我猜你是在JSX表达式中的render（）函数中渲染标记（否则你会通过普通的Javascript或JQuery添加它）。

因此JSX表达式将具有如下内容：

<input id="time" type="time" value={yourValue}>

确保yourValue在ReactComponent类或props中执行render（）的上下文中。或者它可能在该州。

Answer 4

您需要设置React的状态。所以......

this.setState({
  myValue: newValue
})

然后，在渲染中：

<input id="time" type="time" value={this.state.myValue}>

这假设您使用构造函数进行状态设置。这是另一种蠕虫病毒。

Answer 5

您不应动态添加或删除“值”字段。创建React输入时，它必须在整个生命周期内“受控”或“不受控制”。更改它将使React在控制台上大喊大叫。

React understads如果值不存在或未定义，则输入意味着不受控制，因此您需要至少将其设置为""以实现受控的空输入。

“受控”意味着反应控制其价值。例如：对于要更改的值，您需要通知对更改的响应（通过onChange + setState），然后使其更改其值;
“不受控制”意味着反应无法控制输入值，您可以通过常规DOM方式读取和更改值（例如：input.value）。

话虽这么说，为了动态地改变任何元素属性（props）的存在，你可以使用“object spread”操作符。

function render() {
  const custom = { value: 2, color: randomColor() }
  return <Element {...custom}/>
}

在React渲染输入中动态添加属性

5 个答案: