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

Question

我正在开发一个共享组件，它是一个输入文本区域
组件是:

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 未定义
我不知道为什么，有人可以帮忙吗？提前致谢
===更新===
谢谢你们!问题已解决

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 - <textarea> JS中的元素。

e.target.name将是 name属性。

e.target.value将是 value属性。

另外我建议您使用箭头函数，否则您可能需要将该函数绑定(bind)到 this在构造函数上，现在没有被遵循。