Почему это входное значение продолжает давать мне неопределенный

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

Отправьте ваше событие через:

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

Тогда прочитайте это:

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

Answer 2

Вам необходимо получить доступ к 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" }}
      />
    );
  }
}

Answer 3

если это элементы material-ui или аналогичные, то они следуют соглашению о добавлении типа после ссылки:

this.refs.projectName.input.value