How to pass values from input to button react?

Question

There is a field in which the static path of file formation is registered. I have made this field editable in case the user wants to change the path for the formation according to his desire.

<div className="w3-col l8 m8 s8">
    <input
        className="w3-input"
        type="text"
        name="file_name"
        defaultValue={`${test_path}`}
        disabled={false}
    />
</div>

Так же есть кнопка, при клике которой вызывается функция формирования файла по заданному пути

<Btn_enabled
    func={() => create_file(`${test_path}.xmind`)}
    name="Create file"
/>

How can I transfer the modified path by the user to the button?

mgarcia · Accepted Answer · 2019-06-16 16:57:15Z

1

You need to introduce a state for your input component.

And just reference it (by passing it through props, state manager, etc).

For example, input value state named value:

// With hooks
function InputValueToButton() {
  const [value, setValue] = useState(testPath);
  return (
    <div className="App">
      <input
        onChange={e => setValue(e.target.value)}
        type="text"
        value={value}
      />
      <Btn_enabled func={() => create_file(`${value}.xmind`)}/>
    </div>
  );
}

If you are using a version of React that does not support hooks, you can achieve the same thing using classes:

// React classes
class InputValueToButton extends React.Component {
  state = {
    value: testPath
  };
  render() {
    return (
      <div className="App">
        <input
          onChange={e => this.setState({ value: e.target.value })}
          type="text"
          value={this.state.value}
        />
        <button>{this.state.value}</button>
      </div>
    );
  }
}

edited Jun 16, 2019 at 16:57

mgarcia

6,3863 gold badges23 silver badges43 bronze badges

answered Jun 16, 2019 at 15:20

Dennis Vash

54.2k12 gold badges120 silver badges133 bronze badges

Sign up to request clarification or add additional context in comments.

1 Comment

Dancrumb Over a year ago

This example uses React Hooks, so you'll need to be on a recent version of react

Collectives™ on Stack Overflow

How to pass values from input to button react?

1 Answer 1

1 Comment

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

1 Comment

Your Answer

Sign up or log in

Post as a guest

Related