Question

尝试返回字符串“blue”（以便我可以使用 setState 更改颜色）：

<div className="colorBox blue" value="blue" onClick={changeColor}></div>

使用这个函数：

const changeColor = (e) => {
  e.preventDefault()
  this.setState({ color: e.target.value })
}

但我只在将其登录到控制台时收到 undefined

Answer 1

div 元素不能有 value 属性，如果您尝试更改颜色，请使用 color 类型的 input 元素 <input type="color" value="" /> 。
示例：

<input type="color" value={//default color form your state} onChange={changeColor} 
const changeColor = (e) => {
    const color = e.target.value;
    this.setState({color});
}

有关输入颜色结帐 MDN 文档的更多信息：https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input/color

Answer 2

div 标记不包含目标对象中的属性 value，即使您添加了属性。

如果您想获取值，可以使用 button 标记或输入，但对于您的示例，按钮会很好。

示例如下：

<button className="colorBox blue" value="blue" onClick={changeColor}></button>

相同的功能：

const changeColor = (e) => {
    e.preventDefault()
    this.setState({ color: e.target.value })
  }

反应 - e.target.value 返回未定义

2 个答案: