Javascript 在React render输入中动态添加属性

我在render中有一个输入标记，如下所示：

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

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

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

我需要动态地添加

值

属性

---

我怎样才能在反应中做到这一点？提前谢谢

是的，你可以。e、 g.

props

是一个对象，其中包含根据某些条件需要添加的道具或属性，然后可以

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

constprops={id:'time'，type:'time'}；
如果（条件1）{
props.value='一些值'；
}
如果（条件2）{
props.abc=‘其他价值’；
}   

是的，你可以。e、 g.

props

是一个对象，其中包含根据某些条件需要添加的道具或属性，然后可以

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

constprops={id:'time'，type:'time'}；
如果（条件1）{
props.value='一些值'；
}
如果（条件2）{
props.abc=‘其他价值’；
}   

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

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

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

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

---

有关更多信息，请参阅以下文章：

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

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

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

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

---

有关更多信息，请参阅以下文章：

我猜您是在JSX表达式中的render（）函数中呈现标记（否则您将通过普通Javascript或JQuery添加它）

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

---

确保您的值在ReactComponent类或props中的render（）执行上下文的范围内。或者它可能处于状态。

我猜您是在JSX表达式中的render（）函数中呈现标记（否则您将通过普通Javascript或JQuery添加它）

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

---

确保您的值在ReactComponent类或props中的render（）执行上下文的范围内。或者，它可能处于状态。

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

this.setState({
  myValue: newValue
})

然后，在内部渲染：

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

---

这假设您的状态设置带有构造函数。这是一整罐蠕虫。

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

this.setState({
  myValue: newValue
})

然后，在内部渲染：

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

---

这假设您的状态设置带有构造函数。这是一整罐蠕虫。

您不应该动态添加或删除“值”字段。创建React输入时，它必须在整个生命周期内处于“受控”或“非受控”状态。更改它将使React yell在控制台上发出警告

React理解如果值不存在或未定义，则输入意味着不受控制，因此您需要至少将其设置为

”

，以实现受控的空输入

• “受控”指反应控制其价值。例如：对于要更改的值，您需要将更改通知react（通过onChange+setState），然后让它更改其值

• “Uncontrolled”表示react无法控制输入的值，您可以通过常规DOM方式读取和更改该值（例如：

  input.value

  ）

也就是说，为了动态更改任何元素属性（道具）的存在，可以使用“对象扩展”操作符

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

function render（）{
const custom={value:2，color:randomColor（）}
返回
}

不应动态添加或删除“值”字段。创建React输入时，它必须在整个生命周期内处于“受控”或“非受控”状态。更改它将使React yell在控制台上发出警告

React理解如果值不存在或未定义，则输入意味着不受控制，因此您需要至少将其设置为

”

，以实现受控的空输入

• “受控”指反应控制其价值。例如：对于要更改的值，您需要将更改通知react（通过onChange+setState），然后让它更改其值

• “Uncontrolled”表示react无法控制输入的值，您可以通过常规DOM方式读取和更改该值（例如：

  input.value

  ）

也就是说，为了动态更改任何元素属性（道具）的存在，可以使用“对象扩展”操作符

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

function render（）{
const custom={value:2，color:randomColor（）}
返回
}