Как непосредственно вставить текст в любое место поля ввода при нажатии кнопки в React? - PullRequest
Новая
       4

Как непосредственно вставить текст в любое место поля ввода при нажатии кнопки в React?

2 голосов
/ 03 июня 2019

Допустим, у меня есть поле ввода: 

<input type="text" value={this.state.title} />

Теперь оно имеет значение, например, "Доброе утро!".То, что я хотел бы сделать, это иметь возможность вставлять некоторый предопределенный текст в поле ввода, когда в любом месте поля ввода нажимается определенная кнопка.Например, когда я нажимаю кнопки "[First Name]" / "[LastName]", значение поля ввода может стать, например, «Доброе утро [Имя]».

Я могу добавить в конце текста в настоящее времяполучая сфокусированный ввод, присваивая его состоянию, а затем используя его, чтобы узнать, какую клавишу в состоянии изменить: 

addCodeText(value) {
    const { currFocusedInput } = this.state;

    this.setState({
      [currFocusedInput]: `${
        this.state[currFocusedInput]
      } [${value}]`,
    });
  }

Однако, как я уже говорил, это только добавляет к концу текста.Я хотел бы иметь возможность напрямую вставлять тег / элемент ввода вместо изменения состояния, чтобы я мог выбирать, куда вставлять (в любом случае, элемент ввода является контролируемым входом).

Что я имел в видуявляется то, что я могу поместить курсор в поле ввода перед «Доброе утро», и полученное значение при нажатии кнопки будет, например, «[Имя], Доброе утро!».В моем текущем примере он всегда добавляется в конце значения строки.

Как мне поступить?

Ответы [ 2 ]

1 голос
/ 03 июня 2019

@ catandmouse Есть еще один способ сделать это.Вам не нужно использовать Крючки .Это можно сделать с помощью локального state компонента с помощью метода setState.Вы можете поиграть с приведенным ниже примером.

Сначала вы получили строку "A word" внутри поля <input>.После нажатия на кнопку вы получите "A word with big sense". 

class FieldUpdate extends React.Component {
    constructor() {
        super();
        this.state = {
            title: 'A word',
        };
    }

    onChange(e) {
        this.setState({
            title: e.target.value
        });
    }

    updateText(text) {
        this.setState({
            title: `${this.state.title} ${text}`
        });
    }

    render() {
        return (
            <div>
                <input type="text" value={this.state.title} onChange={(e) => this.onChange(e)} />
                <button onClick={() => this.updateText('with big sense')}>Update text</button>
            </div>);
    }
}

React.render(<FieldUpdate />, document.getElementById('app'));
<head><script src="https://cdnjs.cloudflare.com/ajax/libs/react/0.14.0/react.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react-dom/0.14.0/react-dom.min.js"></script>
</head>
<body>
<div id="app"></app>
</body>
1 голос
/ 03 июня 2019

Используйте ref.Что-то вроде следующего с использованием React Hooks? 

   function App(){
     const ref = useRef('');

     const [val,setVal] = useState('Good morning');

     function onClick() {
        ref.current.value = `${val} you!`;
     }

     return( 
         <div>
            <Button onClick={onClick}>Click</Button>
            <Input ref={ref} />
         </div>
     );
   }
Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.

Нет похожих вопросов

...