Question

React-为什么事件目标值未定义

2021-08-02

3007

reactjs

我正在处理一个共享组件，它是一个输入文本区域

组件是：

class TextBox extends React.Component {
  constructor(props) {
    ...
    const value = this.props.value;
    this.state = {
      value: value
    }
  }
  
  handleChange(e, v) {
   console.log("event: ", e);
   this.setState({value: e.target.value}, () => {this.props.handleChange(e, v)});
  }

  render() {
    const {
      name
    } = this.props;

    const {
       value
    } = this.state;

    return (
      <div>
         <h2>{name}</h2>
         <textarea
           value={value}
           onChange={this.handleChange}
         />
      </div>
    );
  }
}

使用此组件：

const [comment, setComment] = useState('');
   const handleChange = useCallback((e, v) => {
      setComment(v);
   }, [comment]);

    ....
    <TextBox 
      name="comment"
      value={comment}
      handleChange={handleChange}
    />

控制台日志显示 event.target.value 未定义我不知道为什么，有人可以帮忙吗？提前谢谢

===update=== 谢谢大家！问题已解决

Answer 1

这应该是第一个参数中的 target 和 value ：

handleChange = (e) => {
   console.log("event: ", e);
   console.log("value: ", e.target.value);
    this.setState({value: e.target.value}, () => {this.props.handleChange(e, v)});
  }

在上述函数内：

e - Window.Event
e.target - JS 中的 <textarea> 元素。
e.target.name 将是 name 属性。
e.target.value 将是 value 属性。

此外，我建议您使用箭头函数，否则您可能需要将函数绑定到构造函数上的 this ，而现在已不再遵循此方法。

Answer 2

您必须在构造函数中绑定 handleChange 函数，如下所示：

this.handleChange=this.handleChange.bind(this);

您也可以像这样使用箭头函数：

handleChange=(e)=>{//...content here}

此外，没有 v 这样的参数。唯一的参数应该是 e 。