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" }}
      />
    );
  }
}

为什么这个输入值总是给我未定义的？

3 个答案: