为什么这个输入值一直给我未定义？

Question

我正在尝试发送带有输入值的 onClick 事件的结果，但该值一直显示 undefined。但是如果我 console.log 整个 ref，我可以看到 ref 连接到一个输入。

这是我目前尝试过的方法：

输入：

<Input
  placeholder="Projektnamn"
  ref="projectName"
  action={
    <Button
      style={{ backgroundColor: "#68478D" }}
      icon="tasks"
      content="Skapa dokument"
      onClick={() => this.createClicked()}
    />
  }
  style={{ padding: "50px" }}
/>

方法：

createClicked = () => {
  console.log(this.refs.projectName)
  let owner = "test";
  let projectName = this.refs.projectName.value;
  this.props.fetchNewProject('/api/create-project', {owner, projectName});
}

Answer 1

如果是 material-ui 元素或类似元素，则它们遵循在 ref:

之后添加类型的约定

this.refs.projectName.input.value

Answer 2

通过以下方式发送您的活动：

onClick={(e) => this.createClicked()

接着读：

createClicked = (e) => {
    console.log(e.target.value)
}

Answer 3

您需要在回调中访问 this.refs.projectName.inputRef.value。

例子

class App extends Component {
  createClicked = () => {
    console.log(this.refs.projectName.inputRef.value);
  };

  render() {
    return (
      <Input
        placeholder="Projektnamn"
        ref="projectName"
        action={
          <Button
            style={{ backgroundColor: "#68478D" }}
            icon="tasks"
            content="Skapa dokument"
            onClick={this.createClicked}
          />
        }
        style={{ padding: "50px" }}
      />
    );
  }
}